CSS Grid Container
Grid Container
A grid container contains one or more grid items arranged in columns and rows.
Direct child elements(s) of the grid container automatically becomes grid items.
An element becomes a grid container when its display
property
is set to grid
or inline-grid
.
Grid Tracks
The rows and columns of a grid is defined with the grid-template-rows
and the grid-template-columns
properties (or
the shorthand grid
or grid-template
properties).
These define the grid tracks. A grid track is the space between two adjacent grid lines.
The grid-template-columns Property
The grid-template-columns
property defines the
number of columns in your grid layout, and it can define the width of each column.
The value is a space-separated-list, where each value defines the width of the respective column.
If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or "auto" if all columns should have the same width.
Example
Make a grid with 4 columns of equal width:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Result:
The grid-template-columns
property can also be used to specify the
exact size (width) of the columns, or a mix of fixed size and auto.
Example
Set a fixed size for column 1, 2, and 4, and keep column 3 as auto size:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Result:
Note: If you have more than 4 grid items in a 4 columns grid, the grid will automatically add a new row to put the items in.
The grid-template-rows Property
The grid-template-rows
property defines the height of each row.
The value is a space-separated-list, where each value defines the height of the respective row:
Example
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Result:
Notice that the first row in the grid above is 80px high, the second row is 200px high, and the third row is 80px (and if a fourth row had been added, it would have been 200px high):
The justify-content Property
The justify-content
property is used to
align the grid items when they do not use all available space on the main-axis (horizontally).
The justify-content
property can have one of the following values:
space-evenly
space-around
space-between
center
start
end
Note: The grid item's total width has to be less than the container's width for the justify-content
property to have any effect.
Example
The space-evenly
value displays the grid items with equal space around them:
.grid-container {
display: grid;
justify-content: space-evenly;
}
Result:
Example
The space-around
value displays the grid items with space
around them:
.grid-container {
display: grid;
justify-content: space-around;
}
Result:
Example
The space-between
value displays the grid items with space between them:
.grid-container {
display: grid;
justify-content: space-between;
}
Result:
Example
The center
value positions the grid items in the center of the container:
.grid-container {
display: grid;
justify-content: center;
}
Result:
Example
The start
value positions the grid items at the
start of the container:
.grid-container {
display: grid;
justify-content: start;
}
Result:
Example
The end
value positions the grid items at the end of the container:
.grid-container {
display: grid;
justify-content: end;
}
Result:
The align-content Property
The align-content
property is used to
align the grid items when they do not use all available space on the cross-axis (vertically).
The align-content
property can have one of the following values:
space-evenly
space-around
space-between
center
start
end
Note: The grid item's total height has to be less than the container's height for the align-content
property to have any effect.
In the following examples we use a 400 pixels high container, to better demonstrate the align-content
property.
Example
The center
value positions the grid items in the middle of the container:
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Result:
Example
With space-evenly
, the grid lines are evenly distributed in the
grid container, with equal space
on top, bottom and between:
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Result:
Example
With space-around
, the space between the
grid lines are
equal, but the space before the first grid item and after the last grid item is set to
half of the space between the grid lines:
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Result:
Example
With space-between
, the space between the
grid lines are
equal, but the first grid item is flush with the start edge of the container, and the
last grid item is flush with the end edge of the container:
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Result:
Example
The start
value positions the grid items
at the start of the container:
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Result:
Example
The end
value positions the grid items at
the end of the container:
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
Result:
The place-content Property
The place-content
property is a shorthand
property for the align-content
and the
justify-content
properties.
Note: The grid item's total height and width has to be less than the container's height
and width for the place-content
property to have any effect.
Example
.grid-container {
display: grid;
height: 400px;
place-content: center center;
}
Result:
Example
Specify the grid lines to align towards the bottom of the grid container, and align the grid items with the same space between them horizontally:
.grid-container {
display: grid;
height: 400px;
place-content: end space-between;
}
Result:
Exercise?What is this?
Test your skills by answering a few questions about the topics of this page
.grid-container {
: ;
}
CSS Grid Container Properties
Property | Description |
---|---|
align-content | Vertically aligns the whole grid inside the container (when total grid size is smaller than container) |
align-items | Aligns content in a grid item along the column axis |
display | Specifies the display behavior (the type of rendering box) of an element |
column-gap | Specifies the gap between the columns |
gap | A shorthand property for the row-gap and the column-gap properties |
grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
grid-auto-columns | Specifies a default column size |
grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
grid-auto-rows | Specifies a default row size |
grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
grid-template-areas | Specifies how to display columns and rows, using named grid items |
grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
grid-template-rows | Specifies the size of the rows in a grid layout |
justify-content | Horizontally aligns the whole grid inside the container (when total grid size is smaller than container) |
place-content | A shorthand property for the align-content and the justify-content properties |
row-gap | Specifies the gap between the grid rows |