Grid Container
Grid Container
You must set the display property of an HTML element to grid or inline-grid in order for it to function as a grid container.
Grid objects are arranged inside rows and columns to form grid containers.
The grid-template-columns Property
The number of columns in your grid layout and the width of each column can also be specified via the grid-template-columns parameter.
The value is a list separated by spaces, where each value indicates the column’s width.
Give each column’s width a value if you want your grid layout to have four columns, or leave it at “auto” if you want all of the columns to have the same width.
Example
Make a grid with 4 columns:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Note: The grid will automatically add a new row to accommodate any more items if there are more than 4 items in a 4 column grid.
The size (width) of the columns can also be specified using the grid-template-columns property.
Example
Set a size for the 4 columns:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
The grid-template-rows Property
The height of every row is specified by the grid-template-rows attribute.
The value is a list separated by spaces, in which each value indicates the height of a different row:
Example
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
The justify-content Property
The entire grid is aligned within the container using the justify-content attribute.
Note: In order for the justify-content property to work, the total width of the grid must be smaller than the width of the container.
Example
.grid-container {
display: grid;
justify-content: space-evenly;
}
Example
.grid-container {
display: grid;
justify-content: space-around;
}
Example
.grid-container {
display: grid;
justify-content: space-between;
}
Example
.grid-container {
display: grid;
justify-content: center;
}
Example
.grid-container {
display: grid;
justify-content: start;
}
Example
.grid-container {
display: grid;
justify-content: end;
}
The align-content Property
The entire grid inside the container can be vertically aligned by using the align-content attribute.
Note: In order for the align-content property to work, the entire height of the grid must be smaller than the height of the container.
Example
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Example
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Example
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Example
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Example
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Example
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
