CSS Grid

MMP 350 > Week 7

Last week we made wireframes and swapped them with other students in the class. Today we'll look at using CSS Grid properties to implement the wireframes in HTML and CSS. This approach is based on the CSS Grid notes by Professor Stein.

Columns

CSS Grid simplifies the math of dividing a layout into even spaces. We'll start with columns. Rather than calculating percentages or adding together pixels, we can simply specify the number of columns to divvy out to child elements.

This used the fractional unit, fr.

For a grid with four columns. Add or remove columns simply by changing the units.

#container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

<div id="container">
	<div>One</div>
	<div>Two</div>
	<div>Three</div>
	<div>Four</div>
</div>

Mixed units are also supported. Throw in percentages or pixels and CSS will do the math for you.

grid-template-columns: 100px 1fr 1fr 1fr;

grid-template-columns: 50% 1fr 1fr;

Repeat

If you need a lot of the same units, use repeat instead of typing the all out:

grid-template-columns: repeat(12, 1fr);

Now we have 12 even columns.

Or repeat multiple units to make columns and gutters:

grid-template-columns: repeat(6, 10px 1fr 10px);

So far we've only looked at ways to set the container column number. We can also set our child elements to use multiple columns in the grid.

#container {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
}
#one {
	grid-column-start: 1;
	grid-column-end: 6;
}
#two {
	grid-column-start: 7;
	grid-column-end: 8;
}
#three {
	grid-column: 9 / 11;
}
#four {
	grid-column: 11 / span 12;
}

<div id="container">
	<div id="one">One</div>
	<div id="two">Two</div>
	<div id="three">Three</div>
	<div id="four">Four</div>
</div>

Rows

We can create rows for our content with similar syntax. We can specify a number of rows according to their height. We can also use the new unit max-content to tell the row to size to fit the largest content.

#rows {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 4em 10em max-content;
}

#header {
	grid-row: 1;
}
#main {
	grid-row: 2;
	grid-column: 1/ span 8;
}
#sidebar {
	grid-row: 2;
	grid-column: 9/ span 12;
}
#footer {
	grid-row: 3;
	grid-column: 1/ span 12;
}

<div id="rows">
	<div id="header">Header</div>
	<div id="main">Main</div>
	<div id="sidebar">Sidebar</div>
	<div id="footer">Footer</div>
</div>

Grid Gap

To automatically add spaces in between the columns and rows in our grid we can use the grid-gap property.

#container {
	grid-gap: 1em; /* add to both columns and rows */
	column-gap: 1em; /* just columns */
	row-gap: 10px; /* just rows */
}

Grid Areas

A feature of the CSS grid is using nicknames to set parts of our content to specific areas in the grid. This makes it easy to change the position of the page content without having to change the markup.

First we need to define the areas of our grid row by row. To do this we need a template area for each column in the row.

Let's make a simpler grid with three columns and three rows.

#container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 120px max-content max-content;
	grid-template-areas:
		"header header header"
		"main main sidebar"
		"footer footer footer";
}

Then we assign our content sections to specific areas.

#header {
	grid-area: header;
}

#main {
	grid-area: main;
}

#sidebar {
	grid-area: sidebar;
}

#footer {
	grid-area: footer;
}

Now we can move content around regardless of the order in the HTML page. For this method it might make more sense to name HTML ids based on content rather than the layout position.