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
they the
Forget the fat lady!
facebook
linkedin2
twitter
thing Forget relationship
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">they  the</div>
          </div> 
          <div class="f-col-max card-text">Forget the fat lady!</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">thing Forget relationship</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
go faster think
I've crashed into a beet truck.
facebook
linkedin2
twitter
can faster to
It's a delight to trust somebody so completely.
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">go faster think</div>
          </div> 
          <div class="f-col-max card-text">I've crashed into a beet truck.</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">can faster to</div>
          </div> 
          <div class="f-col-max card-text">It's a delight to trust somebody so completely.</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>