Discussion on: Do you use a CSS framework based on CSS Grid?

weo3dev profile image

Short answer: you need to take a second, third, fourth look. Also, those older browsers are literally security risks. I am sorry you have to support them, but it would behoove your clients to read Microsoft's support/non-support of versions (because yes I know you're talking about IE. It is always IE)

Long answer: (sorry for the length; I absolutely LOVE css grid)

note: we have a lot of old habits to break. Frameworks is one of them.

A - there is already ability to remain backwards compatible: smashingmagazine.com/2017/11/css-g...

B - using a CSS-grid-based framework is, to me, literally redundant. The whole idea of CSS grid is to make the layout for your project the way it needs to be for your client. Stop using frameworks, and we will hopefully start seeing more unique layouts. 12 columns can go F themselves. The awesomeness is that you can now go to a designer and say "make what you want. Don't think in columns. Think in design." And you will be able to make it, because CSS grid doesn't gaf about how many columns.

C - CSS grid + flexbox is insanely awesome. Add to that fluid typography - smashingmagazine.com/2016/05/fluid... - and you have 3 abilities that make creating and composing with CSS amazing.

D - You will write less by hand using CSS grid out of the box, than you will using any framework. Look below. With two lines, I have a responsive grid that auto fills and expands as needed:

.some-container {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(18.75rem,1fr));

Look at weo3.com for proof. The work section is literally the above, with one media query to change the row gap because I'm picky.

That's it. NO MEDIA QUERIES FOR THE GRID TO WORK. No pixel units used (because pixels are rigid, kill them). No fussing with someone else's worldview on what a grid/framework/website should look like. It's mine, for my site, the way I want it. Two lines.

Using grid I can focus on what the client wants, what the designer envisions, rather than "this is what we have always done".