FluiD
Grid

beta
CSS grid system for future web
  • Container-query based
    Component's grid depends on component size itself, not on window width
  • Automatic
    Just define optimal grid cell size. Then tell how many cells your content requires. Rest is done automatically
  • Component ready
    You can use gird containers inside components now
  • Declarative
    Basic scenarios can be handled by minimal rules (.f-col-1). No more `w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4`

Install

Run a fluid grid build wizard with:
$: npx fluid-grid
Add following polyfill to enable @container queries in browsers which don't support it (There is zero zupport right now)
Beware that the polyfill has some limitations; you can only use px as units for cell definition. See more here
const supportsContainerQueries = 'container' in document.documentElement.style;

if (!supportsContainerQueries) {
	import('https://cdn.skypack.dev/container-query-polyfill');
}
			

Wizard inputs explained

  • $minimal-column-width: Columns are added to a grid as long as single column won't shrink under its minimal width.

    Eg.: grid of width 450px will be filled with 4 columns.

  • $base-grid-gap: Width in pixels. By default there are no gaps in the grid, but if you decide to use gaps, the f-grid-gap-1 class will represent the Base Grid Gap. f-grid-gap-2 will represent double the Base Grid Gap etc.
  • $max-colspan Defines across how many columns can the widest cell span.

    You should not need collspan bigger than 10 (10 * Minimal Column Width). By default it would be 600px. If you need bigger are you should rather use gird with fractions (f-grid-N).

  • $max-rowspan Defines across how many rows can the highest cell span.
  • Use solid-N Allow this option if you plan to use grids with unknown amount of content. If there is not enough content, cells won't stretch to fill the grid, in case f-grid-solid-N class is used
  • $widest-grid-element In order to generate right amount of f-grid-solid-N classes, widest grid element width in pixles is needed.

Showcase

Content driven
Bootstrap like
were can trust
I was part of something special.
facebook
linkedin2
twitter
bucket clock but
You wanna sell some tickets, act like you know what you're talking about.
facebook
linkedin2
twitter
<div class="f-grid f-grid-gap-1">
  <div class="f-col-5">
    <div class="card">
      <div class="f-grid f-grid-5-collapse f-grid-gap-1">
        <div class="f-col-3 img-wrap">
          <img src="https://picsum.photos/id/11/300" alt="" class="img">
        </div> 
        <div class="f-grid f-col-4 f-col-3@6 f-grid-center f-grid-gap-1">
          <div class="f-col-max">
            <div class="title">were can trust</div>
          </div> 
          <div class="f-col-max card-text">I was part of something special.</div> 
          <div class="f-col-max f-grid f-grid-gap-1">
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>facebook</title>
                  <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>linkedin2</title>
                  <path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path>
                  <path d="M2 12h6v18h-6v-18z"></path>
                  <path d="M8 7c0 1.657-1.343 3-3 3"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>twitter</title>
                  <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> 
  <div class="f-col-5">
    <div class="card">
      <div class="f-grid f-grid-5-collapse f-grid-gap-1">
        <div class="f-col-3 img-wrap">
          <img src="https://picsum.photos/id/12/300" alt="" class="img">
        </div> 
        <div class="f-grid f-col-4 f-col-3@6 f-grid-center f-grid-gap-1">
          <div class="f-col-max">
            <div class="title">bucket clock but</div>
          </div> 
          <div class="f-col-max card-text">You wanna sell some tickets, act like you know what you're talking about.</div> 
          <div class="f-col-max f-grid f-grid-gap-1">
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>facebook</title>
                  <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>linkedin2</title>
                  <path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path>
                  <path d="M2 12h6v18h-6v-18z"></path>
                  <path d="M8 7c0 1.657-1.343 3-3 3"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>twitter</title>
                  <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Drag here
Dinosaurs special I'm
God creates Man.
facebook
linkedin2
twitter
a You're character
Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
facebook
linkedin2
twitter
<div class="f-grid f-grid-gap-1">
  <div class="f-col-7">
    <div class="card">
      <div class="f-grid f-grid-5-collapse f-grid-gap-1">
        <div class="f-col-3 img-wrap">
          <img src="https://picsum.photos/id/13/300" alt="" class="img">
        </div> 
        <div class="f-grid f-col-4 f-col-3@6 f-grid-center f-grid-gap-1">
          <div class="f-col-max">
            <div class="title">Dinosaurs special I'm</div>
          </div> 
          <div class="f-col-max card-text">God creates Man.</div> 
          <div class="f-col-max f-grid f-grid-gap-1">
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>facebook</title>
                  <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>linkedin2</title>
                  <path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path>
                  <path d="M2 12h6v18h-6v-18z"></path>
                  <path d="M8 7c0 1.657-1.343 3-3 3"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>twitter</title>
                  <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> 
  <div class="f-col-7">
    <div class="card">
      <div class="f-grid f-grid-5-collapse f-grid-gap-1">
        <div class="f-col-3 img-wrap">
          <img src="https://picsum.photos/id/14/300" alt="" class="img">
        </div> 
        <div class="f-grid f-col-4 f-col-3@6 f-grid-center f-grid-gap-1">
          <div class="f-col-max">
            <div class="title">a You're character</div>
          </div> 
          <div class="f-col-max card-text">Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.</div> 
          <div class="f-col-max f-grid f-grid-gap-1">
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>facebook</title>
                  <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>linkedin2</title>
                  <path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path>
                  <path d="M2 12h6v18h-6v-18z"></path>
                  <path d="M8 7c0 1.657-1.343 3-3 3"></path>
                </svg>
              </div>
            </div> 
            <div class="f-col-1">
              <div class="icon-wrap">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                  <title>twitter</title>
                  <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>