o o o
browser layout illustration

Understanding the CSS Grid


Be sure to experiment with the HTML and CSS on this page by playing with the embedded live code hosted by codepen.io. THE LIVE CODE IS AT THE BOTTOM OF THIS PAGE. It will go a long way to helping you understand how grids work.

I've created several different grids on this page -- that's not altogether unusual, but it does require an extra step or two to make it happen. Here's how: In order to distinguish between these grids in the html below, I created a generic CSS grid class, which I called gField. It looks like this:

.gField {
	display: grid;
	grid-gap: 10px;
	background-color: firebrick;
}

That's a good start, but my "gField" class doesn't specify column and row layout, and what is the point of a layout grid if you aren't, you know, laying-out the content in a specific fashion? In this case, though, I omitted them on purpose, in order to make all my grids look similar (all of them "firebrick" in color, and all of them with a 10px gap between the cells), but not exactly the same. Since each grid layout is a bit different, I use a second class (called "EX1", "EX2", etc.) to specify a unique layout. Here's how I defined a class called "EX1" in my .CSS file, for example:

.EX1 {
	grid-template-columns: 133px 133px 133px;
}

Now, When I want to create my grid container for the first example, I use this declaration in the HTML: <div class="gField EX1"> ... </div>. In effect, this says "This is the start of an container styled with both the gField and the EX1 classes."


Later, when I'm ready to present my third example, the classes that I assign to that block change just a tiny bit: <div class="gField EX3"> ... </div>


In addition to looking at the individual examples, then, check out this page's .CSS and .HTML, too: It's a bit more complicated than the examples, but it serves to illustrate how more complex tasks can be accomplished with grid layouts.

Example One
133px
133px
133px
Example Two
200px
100px
20%
Example Three
repeat(4, 15%)
...
...
...
1fr

Here's how class .EX3 is declared in the .CSS:

  grid-template-columns: repeat(4,15%) 1fr;

In this case, we're explicitly declaring a total of 5 columns: The first column width is 15%. That is repeated for a total of four times: repeat(4, 15%). Then there is a single column that is 1 fraction: 1 fr. The first part means the first four columns will comprise 60% of the total width; that last, lonely 1fr is left, then, to absorb the remaining width (40%).


Units like fr are always relative, and so they are invaluable when designing responsive websites. We'll make greater use of them presently.

Here's another thing about class .EX3: Like some of our other examples, it never mentions rows. This is strategic on our part, and makes use of both the Explicit Grid™ (the one we declare) and the Implicit Grid ® (the one the browser builds in support of our declarations). By not specifying row height, or even how many rows I want, the potential number of rows is infinite, and the row height will vary with the content length of each row. However, when I specify --

  grid-template-rows: 1fr 1fr 1fr;

-- notice how each of the rows is now made equal in height to the others. The fr (fraction) unit of measure is of limited use on its own, but when we can work with several fr at the same time, their relationship becomes very useful. In this case, 1fr 1fr 1fr means our three rows are explicitly set to be equal in height. It doesn't dictate what that height should be -- in this case, the greatest height is adopted as the height of each row.

Example Four A
RED
ORANGE
YELLOW
GREEN
BLUE
INDIGO
VIOLET
These last two rows share a class that specifies:

    grid-column-start: 1;

Since two divs can't both start on grid-column 1, the div that comprises the cell below this one got forced down into that next (and last) row.
See how that middle row grows taller and taller to accomodate the content? But notice how the first row grows taller, and this row does too, to the point where there is a lot of unused space? Why? Check the CSS! In the "blanco" class, we declare grid-template-rows: 1fr 1fr 1fr; Those three 1fr row heights tell the browser that each row in this grid container must be the same height.
Example Four B
RED
ORANGE
YELLOW
GREEN
BLUE
INDIGO
VIOLET

This example, contained in the grid classed "gField EX4B", makes use of the column-start, column-stop syntax. It's clunky (we'll adopt a terrific shortcut next week), but once you understand how it "sees" your layout, it is awesome. And it means (finally!) that our content is actually unmoored from our pasteup: The order in which our text occurs inside our HTML file no longer determines the order in which it appears on-screen.


In the column on the right, you'll find two of the classes that defined a couple of the cells in this grid. The grammar is a bit counter-intuitive, but here's one way to think of it. On the right (in a slightly simplified form from how it appears inside this file), take a look at the .BLUE class from our .CSS file. Loosely translated, it means this:

Horizontally, the BLUE-class cell starts in column 4 starts, but ends before it gets to column 6; vertically, it comprises rows 1 and 2, but ends before it gets to row 3.
.RED {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
}
.BLUE {
	grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 3;
}


See the Pen Gridded_14November2019 by Garrison LeMasters (@Garrison) on CodePen.



Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

2019 Garrison LeMasters, Miami University, Oxford, Ohio.