Experimenting with CSS Grids


After experimenting with it for a while, I’m really happy about the power and flexibility they offer. It didn’t take long to get used to the paradigm of “hey everything is built out of rows and columns and you can tell the browser to position them in different ways”. Compared to the whole thing that’s about messing with floats and clearfixes, this for once doesn’t feel like it’s a hack.

And grids offer complete flexibility in the way you line things out vertically, too.

Basic CSS grid example

This one is based on the code from this article, but without all the stuff around it so that I could really get a grasp on how CSS grids work. Since it didn’t work from scratch at first, a lot of copying and pasting was involved until I understood things properly.

Preview grid-layout.html

The left- and rightmost columns in the grid use the fr unit. This unit means “units of available remaining space”, and cause the whole page to be centered (without needing any automatic margins, mind you).

Making a WordPress-like theme setup

I wanted to see how easy it was to do a traditional header/footer/main content/sidebar setup. I copied the basic HTML given on the same article as mentioned before, but wrote the CSS from scratch so I could really get used to how it functions.

As a bonus, I also added a fullwidth class, which can give individual elements a full page width size without straying from the grid setup. It works swimmingly, and would be a nice kind of feature in a generic WordPress theme.

Preview wp-template-base.html

The layout is chopped up in 5 columns: three equally-sized columns in the middle, surrounded by two 1 fr width columns.

“The Challenge” in a CSS grid

I remember reading an old article titled  The Challenge – Layout by Table or Style? that talked about the challenge of doing a certain web page layout that was easier to do in HTML tables than it was in CSS… so I wanted to put it to the test and see how difficult it would be with CSS grids.

Using grid rows and columns, tackling the challenge ended up being surprisingly easy to do. Even though I only did part of the challenge, adding more layers would not increase the task’s complexity at all. The result is this:

Preview grid-with-rows.html

Another aim in this was to figure out how CSS grid rows work, and I was pleasantly surprised to see that they’re exactly as easy to use and manipulate as columns.

Valuable resources:

One response

Comments are closed.