CSS Grid

Like Flexbox, but two-dimensional. Allows to create complex layouts. Somehow adds additional syntax, which doesn’t have any logic:

• Positioning items adds / (not division) and has two different meanings!
• Template areas add markdown-like syntax for naming areas
• Naming lines adds []
• fr unit. Wat. Flexbox grow/shrink is basically the same thing, but it doesn’t use fr.
• span keyword. Has nothing in to do with HTML <span>. span 2 means “take up 2 cells”.

display: grid and there you go.

# Terminology1

Grid lines - lines that divide columns and rows.
Grid cell - a single unit of a grid
Grid area - rectangular space surrounded by four grid lines
Grid track - space between two grid lines
Grid row - horizontal track of a grid
Grid column - vertical track of a grid

grid-template-rows, grid-template-columns
Set sizes of grid rows and columns. Could be in px, %, etc, or in special unit fr (fraction). You can mix those:

1

grid-template-columns: 10rem 30% 1fr;

grid-auto-rows, grid-auto-columns
Set sizes for rows/columns that overflow the template layout.

grid-row, grid-column²
For positioning grid items, like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.item1 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}
/*or: */
.item1 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

Yes, the second way syntactically looks like division.

See also .

repeat() - a special Grid function to represent a recurring pattern of rows or columns. E.g. repeat(4, 10rem) - 10rem 10rem 10rem 10rem.

minmax() - the name says it all. Useful for setting minimum and maximum row/col size, like minmax(10rem, auto).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

.grid-container {
	display: grid;
	grid-auto-rows: minmax(5rem, auto);
	grid-template-columns: 1fr 20rem;

	grid-gap: 1rem;

	grid-template-areas: "header header"
						 "content sidebar"
						 "footer footer";
}

.grid-header {
	grid-area: header;
}

// And so on

1
2
3
4
5

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 20px;
}

• Learn CSS Grid
• CSS Grid PlayGround | Mozilla
• Layout Land - YouTube
• Grid by Example
• A simple visual cheatsheet