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
I was part of something special.
You wanna sell some tickets, act like you know what you're talking about.
<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 >
Example Code
Yeah, but your scientists were so preoccupied with whether or not they could, they didn't stop to think if they should.
<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 >