CSS Grid Terminology
<div class="site">
Grid Container
<header class="masthead">
</header>
<h1 class="page-title">
Element containing a grid, </h1>
defined by setting
<main class="main-content">
display: grid; </main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->
<div class="site">
Grid Item
<header class="masthead">
</header>
<h1 class="page-title">
Element that is a direct </h1>
descendant of the grid
<main class="main-content">
container. </main>
<aside class="sidebar">
</aside>
<footer class="footer">
</footer>
</div><!-- .site -->
Grid Line
Horizontal (row) or vertical
(column) line separating
the grid into sections.
Grid Line 1
1 2 3 4 5 6
2
Grid lines are referenced
by number, starting and 3
ending with the outer
borders of the grid. 4
6
Grid Line 1
1 2 3 4 5 6
2
Grid lines can also be
named for easier 3
reference.
4
6
Grid Cell
The intersection between a
grid row and a grid column.
Effectively the same as a
table cell.
Grid Track
The space between two or
more adjacent grid lines.
Row tracks are horizontal,
Column tracks vertical.
Grid Area
Rectangular area between
four specified grid lines.
Grid areas can cover one
or more cells.
Grid Gap
Empty space between grid
tracks (shown in blue).
Commonly called gutters.
CSS Grid Lines and Units
.site
grid-template-columns:
2fr 1fr 1fr;
2fr 1fr 1fr
Draws grid lines. Takes list
of length values (em, px, 2 fractions 1 fraction each
%, fr, etc.) denoting the
distance between each
line.
.site
auto
grid-template-rows: Fit content
auto 1fr 3fr; 1fr
1 fraction
Draws grid lines. Takes list
of length values (em, px,
%, fr, etc.) denoting the 3fr
3 fractions
distance between each
line.
Fraction (fr) unit
The fr unit represents a fraction of
the available space in the grid
container.
grid-template-rows: 1fr 1fr 2fr;
minmax() function
The minmax() function defines a
size range greater than or equal to
min and less than or equal to max.
grid-template-rows: 1fr minmax(10em, 20em) 1fr;
repeat() notation
The repeat() notation repeats the
provided pattern a specified
number of times.
grid-template-rows: repeat(2, 1fr) 2fr;
Placing Items on the Grid
1 .site 2 3 4
1
grid-column: 2/4;
grid-row::2/3;; 2
3
Applied to grid items.
Places the item by
declaring start and end
lines.
4
span keyword
The span keyword is used to define
how many grid tracks an element
should span.
// Start at line 2, span 3 columns:
grid-columns: 2/3 span;
Grid Areas
.site
title title title
grid-template-areas
main header header
Applied to grid container.
Uses a text-based grid
map to apply grid area main sidebar footer
names to individual cells.
Implicit lines
If grid item placement requires
additional columns or rows to be
created, the browser adds implicit
lines to keep the grid structurally
sound.
