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 Example Code
<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" > your It go</div >
</div >
<div class ="f-col-max card-text" > Must go faster.</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" > reclining What our</div >
</div >
<div class ="f-col-max card-text" > Here's my chance.</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 >
Example Code
We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE!
<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" > You so windows</div >
</div >
<div class ="f-col-max card-text" > We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE!</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" > comes go thank</div >
</div >
<div class ="f-col-max card-text" > A computer virus.</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 >