CSS GRID LAYOUT
Introduction
Created by Igor Provotorov
github.com
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.
Flexbox vs Grid
CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.
Flexbox vs Grid
Grid Layout the basics
Grid Container
Grid Items
Grid Container Creates "Grid Context"
Grid Container aka "Grid"
Grid Lines
Grid Columns
Column Axis
Grid Rows
Row Axis
Grid Tracks
Grid Tracks
Grid Cells
Grid Areas
Grid Container
Create a grid container by setting the display property with a value of grid or inline-grid. All direct children of grid containers become grid items.
.grid-container {
display: grid;
}
Grid items are placed in rows by default and span the full width of the grid container.
.grid-container {
display: inline-grid;
}
Explicit Grid
Explicitly set a grid by creating columns and rows with the grid-template-columns and grid-template-rows properties.
A row track is created for each value specified for grid-template-rows. Track size values can be any non-negative, length value (px, %, em, etc.)
Items 1 and 2 have fixed heights of 50px and 100px.
Because only 2 row tracks were defined, heights of items 3 and 4 are defined by the contents of each.
.grid-container {
display: grid;
grid-template-rows: 50px 100px;
}
Like rows, a column track is created for each value specified for grid-template-columns.
Items 4, 5 and 6 were placed on a new row track because only 3 column track sizes were defined; and because they were placed in column tracks 1, 2 and 3, their column sizes are equal to items 1, 2 and 3.
Grid items 1, 2 and 3 have fixed widths of 90px, 50px and 120px respectively.
.grid-container {
display: grid;
grid-template-rows: 50px 100px;
grid-template-columns: 90px 50px 120px;
}
The fr unit helps create flexible grid tracks. It represents a fraction of the available space in the grid container (works like Flexbox’s unitless values).
In this example, items 1 and 2 take up the first two (of four) sections while item 3 takes up the last two.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
}
fr is calculated based on the remaining space when combined with other length values.
In this example, 3rem and 25% would be subtracted from the available space before the size of <fr is calculated: 1fr = ((width of grid) - (3rem) - (25% of width of grid)) / 3
.grid-container {
display: grid;
grid-template-columns: 3rem 25% 1fr 2fr;
}
Minimum and Maximum Grid Track Sizes
Tracks sizes can be defined to have a minimum and/or maximum size with the minmax() function.
The minmax() function accepts 2 arguments: the first is the minimum size of the track and the second the maximum size. Alongside length values, the values can also be auto, which allows the track to grow/stretch based on the size of the content.
In this example, the first row track is set to have a minimum height of 100px, but its maximum size of auto will allow the row track to grow it the content is taller than 100px. The first column track has a minimum size of auto, but its maximum size of 50% will prevent it from getting no wider than 50% of the grid container width.
.grid-container {
display: grid;
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
}
Repeating Grid Tracks
Define repeating grid tracks using the repeat() notation. This is useful for grids with items with equal sizes or many items.
The repeat() notation accepts 2 arguments: the first represents the number of times the defined tracks should repeat, and the second is the track definition.
.grid-container {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
}
repeat() can also be used within track listings.
In this example, the first and last column tracks have widths of 30px, and the 3 column tracks in between, created by repeat(), have widths of 1fr each.
.grid-container {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: 30px repeat(3, 1fr) 30px;
}
Grid Gaps (Gutters)
The grid-column-gap and grid-row-gap properties create gutters between columns and rows.
Grid gaps are only created in between columns and rows, and not along the edge of the grid container.
Gap size values can be any non-negative, length value (px, %, em, etc.)
.grid-container {
display: grid;
grid-row-gap: 20px;
grid-column-gap: 5rem;
}
If two values are specified, the first represents grid-row-gap and the second grid-column-gap.
grid-gap is shorthand for grid-row-gap and grid-column-gap.
.grid-container {
display: grid;
grid-gap: 100px 1em;
}
One value sets equal row and column gaps.
.grid-container {
display: grid;
/*grid-row-gap: 2rem;
grid-column-gap: 2rem;*/
grid-gap: 2rem;
}
Positioning Items by Grid Line Numbers
Grid lines are essentially lines that represent the start of, the end of, or between column and row tracks.
Each line, starting from the start of the track and in the direction of the grid, is numbered incrementally starting from 1.
This 2-column by 3-row grid results in 3 column lines and 4 row lines. Item 1 was repositioned by row and column line numbers.
If an item spans only one row or column, grid-row/column-end is not necessary.
.grid-item--1 {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 3;
}
grid-row is shorthand for grid-row-start and grid-row-end.
grid-column is shorthand for grid-column-start and grid-column-end.
If one value is provided, it specifies grid-row/column-start.
If two values are specified, the first value corresponds to grid-row/column-start and the second grid-row/column-end, and must be separated by a forward slash /.
.grid-item--1 {
grid-row: 2;
/*grid-colum-start: 3;
grid-colum-end: 4;*/
grid-column: 3 / 4;
}
grid-area is shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.
If four values are specified, the first corresponds to grid-row-start, the second grid-column-start, the third grid-row-end and the fourth grid-column-end.
.grid-item--1 {
/*grid-row-start: 2;
grid-colum-start: 2;
grid-row-end: 3;
grid-colum-end: 3;*/
grid-area: 2 / 2 / 3 / 3;
}
Spanning Items Across Rows and Columns
Grid items span only one column and row track by default, but can span multiple row and/or column tracks using the same properties to position them.
Set a grid item to span more than one column track by setting grid-column-end to a column line number that is more than one column away from grid-column-start.
.grid-item--1 {
grid-column-start: 1;
grid-column-end: 4;
}
Grid items can also span across multiple row tracks by setting grid-row-end to more than one row track away.
.grid-item--1 {
grid-row-start: 1;
grid-row-end: 4;
}
Shorthand properties grid-row and grid-column can also be used to position and span grid items more than one row or column.
.grid-item--1 {
grid-row: 2 / 5;
grid-column: 2 / 4;
}
The keyword span, followed by the # of columns or rows to span, can also be used.
.grid-item--1 {
/*grid-row-start: 2;
grid-row-end: 5;*/
grid-row: 2 / span 3;
/*grid-column-start: 1;
grid-column-end: 3;*/
grid-column: span 2;
}
Naming Grid Lines
Grid lines can be named when defining the grid with the grid-template-rows and grid-template-columns properties. Line names can then be referenced to position grid items.
Assign names to grid lines when defining your grid with the grid-template-rows and grid-template-columns properties.
In line names, avoid keywords that appear in the specification (e.g. span) to not cause confusion.
Assigned line names must be wrapped in square brackets [name-of-line] and placed relative to the grid tracks.
.grid-container {
grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
}
Multiple names can be assigned to grid lines by adding names within square brackets and separating each with a whitespace.
Each line name can then be referenced when positioning grid items by line names.
.grid-container {
grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];
}
Positioning Items by Line Names
With named grid lines, items can be positioned by line names and numbers.
Referenced line names should not be wrapped in square brackets.
.grid-item--1 {
grid-row-start: row-2-start;
grid-row-end: row-end;
grid-column-start: col-2-start;
grid-column-end: col-end;
}
grid-row and grid-column shorthand properties also support the use of grid line names when positioning items.
.grid-item--1 {
grid-row: row-2-start / row-end;
grid-column: col-2-start / col-end;
}
Naming and Positioning Items by Grid Areas
Like grid line names, grid areas can also be named with the grid-template-areas property. Names can then be referenced to position grid items.
Sets of names should be surrounded in single or double quotes, and each name separated by a whitespace. Each set of names defines a row, and each name defines a column.
.grid-container {
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
grid-template-rows: 150px 1fr 100px;
grid-template-columns: 1fr 200px;
}
Grid area names can be referenced by the same properties to position grid items: grid-row-start, grid-row-end, grid-column-start, and grid-column-end.
.header {
grid-row-start: header;
grid-row-end: header;
grid-column-start: header;
grid-column-end: header;
}
The grid-row and grid-column shorthand properties can also reference grid area names.
.footer {
grid-row: footer;
grid-column: footer;
}
The grid-area shorthand property can also be used to reference grid area names.
.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
Aligning Grid Items (Box Alignment)
CSS’s Box Alignment Module complements CSS Grid to allow items to be aligned along the row of column axis.
justify-items and justify-self align items along the row axis, and align-items and align-self align items along the column axis.
justify-items and align-items are applied to the grid container and support the following values:
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- last baseline
Items are positioned at the start of the row axis (row line number 1).
.grid {
grid-template-rows: 80px 80px;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"content content"
"content content";
}
.item--1 {
grid-area: content;
}
.grid {
justify-items: start;
}
Items are positioned at the center of the row axis.
.grid {
justify-items: center;
}
Items are positioned at the end of the row axis.
.grid {
justify-items: end;
}
Items are stretched across the entire row axis. stretch is the default value.
.grid {
justify-items: stretch;
}
Items are positioned at the start of the column axis (column line 1).
.grid {
align-items: start;
}
Items are positioned at the center of the column axis.
.grid {
align-items: center;
}
Items are positioned at the end of the column axis.
.grid {
align-items: end;
}
Items are stretched across the entire column axis.
.grid {
align-items: stretch;
}
Items are positioned at the center of the row and column axes.
.grid {
justify-items: center;
align-items: center;
}
Individual items can be self-aligned with the align-self and justify-self properties. These properties support the following values:
- auto
- normal
- start
- end
- center
- stretch
- baseline
- first baseline
- last baseline
justify-self aligns individual items along the row axis.
.item--1 { justify-self: start }
.item--2 { justify-self: center }
.item--3 { justify-self: end }
align-self aligns items along the column axis.
.item--1 { align-self: start }
.item--2 { align-self: center }
.item--3 { align-self: end }
Item 1 is positioned at the center of the row and column axes.
.item--1 {
justify-self: center;
align-self: center;
}
Aligning Grid Tracks
Grid tracks can be aligned relative to the grid container along the row and column axes.
align-content aligns tracks along the row axis and justify-content along the column axis. They support the following properties:
- normal
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
- baseline
- first baseline
- last baseline
start aligns column tracks along and at the start of the row axis — it is the default value.
.grid-container {
width: 100%;
height: 300px;
grid-template-columns: repeat(4, 45px);
grid-template-rows: repeat(4, 45px);
grid-gap: 0.5em;
justify-content: start;
}
Columns are aligned at the end of the row axis.
.grid-container {
justify-content: end;
}
Columns are aligned at the center of the row axis.
.grid-container {
justify-content: center;
}
The remaining space of the grid container is distributed and applied to the start and end of each column track.
.grid-container {
justify-content: space-around;
}
The remaining space is distributed between the column tracks.
.grid-container {
justify-content: space-between;
}
The remaining space is distributed where the space between the columns are equal to the space at the start and end of the row track.
.grid-container {
justify-content: space-evenly;
}
start aligns rows at the start of the column axis and is the default value.
.grid-container {
align-content: start;
}
Rows are aligned at the end of the column axis.
.grid-container {
align-content: end;
}
Rows are aligned at the center of the column axis.
.grid-container {
align-content: center;
}
The remaining space of the grid container is distributed and applied to the start and end of each row track.
.grid-container {
align-content: space-around;
}
The remaining space is distributed between the row tracks.
.grid-container {
align-content: space-between;
}
The remaining space is distributed where the space between the rows are equal to the space at the start and end of the column track.
.grid-container {
align-content: space-evenly;
}
Browser Supports
CSS GRID layout is supported by all modern browsers