November, 2020
Multiple Approaches
Grid layouts can be created either explicitly or implicitly. Explicit grid layouts involve defining the rows and columns and then placing content within these locations.
Grid offers multiple approaches to specifying the dimensions of the parent item and the locations of the child items.
Consider a landscape layout containing four rows and two columns. The first row contains the header, the second row contains the nav bar, the third row contains both the main and article sections, while the fourth row contains the footer. The header, nav bar, and footer all cross both columns, while main is in the first column and article is in the second column.
(Note: in these examples I’ve set the body of the document to be approximately full-screen. This is simply to help clarify the examples on-screen.)
We can create this layout fairly easily using grid; but there are multiple ways to name the regions!
Full CSS Terms: No Shorthand
Using this approach, we list each and every item fully.
HTML
<body>
<div class="container">
<header class="item-a">This is my header.</header>
<nav class="item-b">This is navbar</nav>
<main class="item-c">This is main</main>
<article class="item-d">This is article</article>
<footer class="item-e">This is footer</footer>
</div>
</body>
CSS
body {
margin: 0px;
width: 99.6vw;
height: 99.5vh;
}
.container {
display: grid;
grid-template-columns: 75% 25%;
grid-template-rows: 1.5fr 1fr 6fr 1fr;
border: thin solid black;
background-color: yellow;
width: 100%;
height: 100%;
}
header {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background-color: green;
}
nav {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
background-color: blue;
}
main {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
background-color: white;
}
article {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
background-color: antiquewhite;
}
footer {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
background-color: red;
}
Using Shorthand
The above approach is an excellent way to learn grid; however, it’s not a pleasant typing experience. Fortunately the shorthand format helps alleviate the typing.
The following CSS produces exactly the same results as seen above.
CSS
body {
margin: 0px;
width: 99.6vw;
height: 99.5vh;
}
.container {
display: grid;
grid: 1.5fr 1fr 6fr 1fr / 75% 25%;
border: thin solid black;
background-color: yellow;
width: 100%;
height: 100%;
}
header {
grid-column: 1 / 3;
grid-row: 1 / 2;
background-color: green;
}
nav {
grid-column: 1 / 3;
grid-row: 2 / 3;
background-color: blue;
}
main {
grid-column: 1 / 2;
grid-row: 3 / 4;
background-color: white;
}
article {
grid-column: 2 / 3
grid-row: 3 / 4;
background-color: antiquewhite;
}
footer {
grid-column: 1 / 3;
grid-row: 4 / 5;
background-color: red;
}
Carefully examine the changes in the CSS for .container. The following two items both define a grid with 4 rows and 2 columns. Note that the grid shorthand uses the format rows / columns.
grid-template-columns: 75% 25%;
grid-template-rows: 1.5fr 1fr 6fr 1fr;
grid: 1.5fr 1fr 6fr 1fr / 75% 25%;
Next, look at the CSS for header. The shorthand format is much easier!
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
grid-column: 1 / 3;
grid-row: 1 / 2;
Using Named Regions
Next, consider the following CSS. Rather than using grid line numbers (or names) to place the child items on the grid, names are used instead!
Note the changes in the .container CSS. Pay attention to the grid-template-areas content. The layout you see in text format is the same layout to be used onscreen. Header will use two columns, as will nav and footer. Main and article will use one column each, with main on the left side and article on the right.
body {
margin: 0px;
width: 99.6vw;
height: 99.5vh;
}
.container {
display: grid;
grid: 1.5fr 1fr 6fr 1fr / 75% 25% ;
grid-gap: 5px;
grid-template-areas:
"header header"
"nav nav"
"main article"
"footer footer";
justify-items: stretch;
align-items: stretch;
border: thin solid black;
background-color: yellow;
width: 100%;
height: 100%;
}
header {
grid-area: header;
background-color: green;
}
nav {
grid-area: nav;
background-color: blue;
}
main {
grid-area: main;
background-color: white;
}
article {
gird-area: article;
background-color: antiquewhite;
}
footer {
grid-area: footer;
background-color: red;
}
Next, look at the CSS for header. Rather than specifying the location using line numbers, this approach just assigns the child items to the spaces named within the CSS for the parent item.
Note that, in this example, the areas are named using the structural element names. This is not necessary–we could name the areas anything. For example,
grid-template-areas:
"header header"
"nav nav"
"main article"
"footer footer";
could become
grid-template-areas:
"alpha alpha"
"hello hello"
"bob cindy"
"carrot carrot";
If we made those changes, header would be defined as
header {
grid-area: alpha;
background-color: green;
}
In short, there are at least three ways to specify location when using CSS grid.
Naming Grid Lines
Grid lines can be assigned names which are then used for referencing location. That’s very similar to just using the line numbers, however. When defining the rows or columns, simply add the names within the grid-template-rows or grid-template-columns statement BEFORE specifying the track size. Line names must be placed within [].
grid-template-colums: [Bob] 200px [Cindy] 200px;
Selecting an Approach
There is no right or wrong way to do this. I do suggest starting with the full terminology, then learning the shorthand and the region names. Personally I prefer the shorthand approach but the named approach certainly has benefits.