Contributed by Florian Schulz,
This grid uses multiple columns without wrapping. Items can be placed within the grid by using grid-column and grid-row.
By default, this grid has 12 columns but you can change the number of columns. On narrow screens, it’s often useful to reduce the number of columns using media queries.
Here you’ll find the code that is used to generate the layout illustrations above. As with many things in CSS, there are most likely alternative ways to achieve the same layout :)
Keep in mind: This is not a full-featured CSS library that tries to do everything. So for now, please copy, paste and modify the code for your own needs.
Many of the examples use a custom layout attribute to style the layout container. While this may be unfamiliar, I find it more expressive than using classes with prefixes.
If you feel uncomfortable using non-standard attributes in your HTML, feel free to change the code to use classes instead.