CSS grid system for future web - Fluid Grid

You can directly try it at fluid-grid.com

But I encourage you to read on and get more info on why and how I created very different grid framework, than any other we currently have.

Two years ago I wrote an article about rethinking web design. It got several thousands of reads and it triggered broad discussion on that topic. Most of feedback was positive, but people complained about need of web components in order to enable this new responsive style.

Here I am two years later with reworked solution, which is pure CSS based. For now, it requires Container queries polyfill. Fortunately, there has been one, done by Surma (Google dev)

New enhanced grid framework

My first try was kind of prototype (more on that in mu above mentioned article). I used it on few projects and it worked well. But it was not ready for public use, as it required precise understanding of all predefined classes and ability to add custom ones, where needed.

This time, there is full featured documentation, examples, custom grid builder (wizard) and more to come.

Why new grid system?

I had two main reasons:

First of all, I have been working for past few years with various component framework and I found out, that current grid solutions based on @media queries simply don't fit to component driven web development. You cannot use media query driven grid inside component, because you don't know where the component will be used. Will the component be full screen wide or just 150px? You never know.

Second of all, I started to be pissed off declaring col-sm-6 col-md-4 col-lg-3 col-xl-2 just for sake of telling an element, it should always be around 250px wide. Once I'd found our there is a way to tell an element, it should stick to a grid and be always around 250px wide, by simply using col-1, there was no way back!

Fluid grid features

.

1. Container-query based

Component's grid depends on components size itself, not on window width

.

2. Automatic

Just define optimal grid cell size. Then tell how many cells your content requires. Rest is done automatically

.

3. Component ready

You can use gird containers inside components now and don't worry how big the component is in your page

.

4 .Declarative

Basic scenarios can be handled by minimal declarative rules .f-col-1. No more imperative description w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4

.

5 .CLI

You can create your own custom made fluid grid, with sizes fitting your needs. Just run npx fluid-grid and command line wizard will guide thru.

It is way better to see it in action to really understand how different it is compared to twitter bootstrap grid or a tailwind grid. Just go and check it fluid-grid.com if you haven't done already.

What's next

Fluid Grid is now in Beta, as there are several pending questions and the grid extent can change a bit.

It would be great to start discussion on, what can be changed, improved,... Why some approaches are now used over others etc.

For instance these are open topics for discussion:

1. Fluid grid greatly supports components' internal grids, tiles' grids and other smaller grids. However, usage for big layouts produces more code than desired. Should there be separate version for layouts only? Should a page layout support be omitted and outsourced to a developer. Or should there be some kind of breakpoints (I can think of 8, 13, 21 columns) like in the bootstrap grid system, when a grid is used for layouts?

2. Do we need more classes and more build in features, or should the grid stick to a bare minimum and try to be super lightweight?

3. Should the wizard let developer make even more customised builds, or should we rather stick to more uniform output?

There are, for sure, more questions and hopefully answers.
It would be great to discuss options and possibilities here or in the projet's github.

Looking for your feedback, ideas, pull requests and offers for collaboration ;)