CSSGrid is an easier-to-use grid. No .first, no .last, just nestable grid slots.
CSSGrid is an effort to use less classes to achieve a comprehensive and flexible grid. Each element in the grid only requires one class. That means no .first or .last classes anywhere.
Nesting is no problem. You can nest elements as deeply as you desire, and they'll just work. Just wrap each level of your nested content in a .row class and you’ll be good to go.
CSSGrid means less junk in your HTML in favor of a little bit of extra CSS. Even then, CSSGrid weighs in at 5kb with comments and readable styles.
Using CSSGrid is easy. It starts with a wrapper which is called .grid in this example (but you could change it to whatever you'd like). Once you’ve got the wrapper in place, create divs with a class of .row. Inside each row, create a set of columns for content areas.
CSSGrid is built on a 12 column grid. You can combine columns easily to support your different structures. Each column class is prefixed with a c designator and from there it’s a simple amtter of choosing the appropriate span of columns (1-n and so on) you’d wish to use.
51 |Spanning columns is done by simply running numbers together, for example: c1-3 would be a solid div spanning three columns (or 3/12) while c4-5 would be solid div spanning two columns (2/12) wide and appearing after the first three columns.
CSSGrid is licensed under the MIT License.
56 |Below is a sample grid to give you an idea of the slot structure, and how combining slots works to create a variety of layouts. Those sections in blue are nested. Darker blue divs are nested one level and lighter blue are two levels deep.
65 |