After using CSS Grid on large teams and large projects we still ended up with writing mixins/utility classes to define basic layouts with grid. We made utilities so layouts across the application were consistent and could be adjusted easily. For more complex layouts we would define layout with the CSS Grid syntax explicitly.
The utilities I came up with eventually evolved into blueprintcss.dev a layout library I built based on CSS grid. Because of CSS Grids behavior you can define pretty complex layouts using utility based classes in the HTML without the need of excess wrapper elements like float/flexbox based grids.
Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesome
I try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!
He/him
I'm not super fond of placing multiple rows of columns into a single row-container - I like the more traditional markup structure, where each row is represented by a row-wrapper.
Rather than adding margin after every row, I prefer to add margin above consecutive rows, like so:
I still wish there was a way to implement a grid that uses relative weights - like this one, but implemented using grid rather than flex, since, unfortunately, the flex approach falls apart when you add margin, padding or borders.
I don't think relative weights are possible with grid though? 🤔
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
After using CSS Grid on large teams and large projects we still ended up with writing mixins/utility classes to define basic layouts with grid. We made utilities so layouts across the application were consistent and could be adjusted easily. For more complex layouts we would define layout with the CSS Grid syntax explicitly.
The utilities I came up with eventually evolved into blueprintcss.dev a layout library I built based on CSS grid. Because of CSS Grids behavior you can define pretty complex layouts using utility based classes in the HTML without the need of excess wrapper elements like float/flexbox based grids.
Nice! I'm glad to see that v3 removed the need for the row wrapper elements. That's pretty neat!
Nice, simple approach! 👍
I'm not super fond of placing multiple rows of columns into a single row-container - I like the more traditional markup structure, where each row is represented by a row-wrapper.
Rather than adding margin after every row, I prefer to add margin above consecutive rows, like so:
jsfiddle.net/ev7n36q8/2/
I still wish there was a way to implement a grid that uses relative weights - like this one, but implemented using
gridrather thanflex, since, unfortunately, theflexapproach falls apart when you add margin, padding or borders.I don't think relative weights are possible with
gridthough? 🤔