Introduction to CSS Grid Container
CSS Grid Container
CSS Grid is a powerful layout system in CSS that allows you to create complex, multi-dimensional layouts with ease. In CSS Grid, the container element is defined as a grid container, and it is responsible for defining the grid layout and its properties.
To create a grid container, you can set the display
property to grid
or inline-grid
.
As an example:
.container {
display: grid;
}
Once the container element is defined as a grid container, you can use various properties to control the layout and sizing of its grid items, such as grid-template-columns
, grid-template-rows
, grid-template-areas
, grid-column-gap
, grid-row-gap
, and grid-gap
.
As an example:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
}
Example
Here's an example of a grid container using HTML and CSS:
Editor
In this example:
- We have created a
grid container
with a class of grid-container. Thedisplay: grid
; property sets the container to be a grid. - The
grid-template-columns: repeat(3, 1fr)
; property specifies that the grid should have three columns with each column taking up an equal amount of space. - The
grid-gap: 10px
; property sets the gap between the grid items to be 10 pixels. - We have also created grid items with a class of
grid-item
. These items are the individual cells within the grid. - The
background-color
,border
,padding
,font-size
, andtext-align
properties are used to style these items.
The grid-template-columns
Property
The grid-template-columns
property takes one or more values, each of which represents the width of a single column. Values can be specified using various units such as pixels, percentages, or fractions (using the fr
unit).
As an example:
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 2fr;
}
In this example:
- The first column is
100
pixels wide, and the second and third columns have a flexible width that will fill the remaining space in a 3:2 ratio (2/3 for the third column and 1/3 for the second column).
You can also use keywords such as repeat
and auto-fit
to create a more flexible grid layout. For example, to create a grid with 4 equal columns, you can use the following code:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
In this example, the minmax
function is used to set a minimum and maximum width for each column, and the auto-fit
keyword is used to automatically adjust the number of columns to fit the available space, while ensuring that each column is at least 200 pixels wide.
The grid-template-rows
Property
The grid-template-rows
property takes one or more values, each of which represents the height of a single row. Values can be specified using various units such as pixels, percentages, or fractions (using the fr unit).
As an example:
.grid-container {
display: grid;
grid-template-rows: 100px 1fr;
}
In this example:
- The first row is
100
pixels tall, and the second row has a flexible height that will fill the remaining space.
You can also use keywords such as repeat
and auto-fit
to create a more flexible grid layout.
As an example:
.grid-container {
display: grid;
grid-template-rows: repeat(4, 1fr);
}
In this example:
- The
repeat
function is used to repeat the1fr
value 4 times, creating 4 equal rows.
You can also use the grid-auto-rows
property to define the height of rows that are created implicitly when more grid items are added to the grid than there are rows defined in the grid-template-rows
property.
As an example:
.grid-container {
display: grid;
grid-template-rows: 100px 1fr;
grid-auto-rows: 50px;
}
In this example:
- The first row is
100
pixels tall, the second row has a flexible height that will fill the remaining space, and any additional rows that are created implicitly will have a height of50
pixels.
Example
Here's an example of using grid-template-rows property:
Editor
In this example:
- We have created a grid container with a class of
grid-container
. - The
display: grid
; property sets the container to be a grid. - The
grid-template-columns: repeat(3, 1fr)
; property specifies that the grid should have three columns with each column taking up an equal amount of space. - The
grid-template-rows: 100px 200px 1fr
; property specifies that the grid should have three rows, where the first row is set to have a height of100px
, the second row is set to have a height of200px
, and the third row is set to take up the remaining space using the1fr
unit. - We have also created grid items with a class of
grid-item
. These items are the individual cells within the grid. - The
background-color
, border,padding
,font-size
, andtext-align
properties are used to style these items. - Inside the container, we have nine grid items, which will automatically be arranged into the grid based on the
grid-template-columns
andgrid-template-rows
properties.
The justify-content
Property
The justify-content
property is a CSS property used in a grid container to align the grid items along the horizontal axis (or main axis) of the grid. It controls the distribution of extra space between and around the grid items in the grid container.
The justify-content
property can take several values:
flex-start
: aligns the grid items to the left of the grid containerflex-end
: aligns the grid items to the right of the grid containercenter
: aligns the grid items at the center of the grid containerspace-between
: distributes the grid items evenly with equal space between them, but no space at the outer edges of the containerspace-around
: distributes the grid items evenly with equal space around them, including space at the outer edges of the containerspace-evenly
: distributes the grid items evenly with equal space around them, including space at the outer edges of the container and between each item.
As an example:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
justify-content: center;
}
In this example:
- The
justify-content
property is set tocenter
, which will align the grid items at the center of the grid container.
You can also use the justify-items
property to align the individual grid items within the grid cells, and the justify-self
property to align a specific grid item within its cell.
Example
Here's an example of using justify-content
property:
Editor
In this example:
- We have created a
grid container
with a class of grid-container. Thedisplay: grid
; property sets the container to be a grid. - The
grid-template-columns: repeat(3, 1fr)
; property specifies that the grid should have three columns with each column taking up an equal amount of space. - The
grid-template-rows: 100px 200px 1fr
; property specifies that the grid should have three rows, where the first row is set to have a height of100px
, the second row is set to have a height of200px
, and the third row is set to take up the remaining space using the1fr
unit. - We have also created grid items with a class of
grid-item
. These items are the individual cells within the grid. Thebackground-color
,border
,padding
,font-size
, andtext-align
properties are used to style these items. - The
justify-content: center
; property centers the grid items horizontally within the grid container. - Inside the container, we have nine grid items, which will automatically be arranged into the grid based on the
grid-template-columns
andgrid-template-rows
properties.
The align-content
Property
The align-content
property is a CSS property used in a grid container to align the grid items along the vertical axis (or cross axis) of the grid. It controls the distribution of extra space between and around the grid items in the grid container.
The align-content
property can take several values:
flex-start
: aligns the grid items to the top of the grid containerflex-end
: aligns the grid items to the bottom of the grid containercenter
: aligns the grid items at the center of the grid containerspace-between
: distributes the grid items evenly with equal space between them, but no space at the outer edges of the containerspace-around
: distributes the grid items evenly with equal space around them, including space at the outer edges of the containerspace-evenly
: distributes the grid items evenly with equal space around them, including space at the outer edges of the container and between each item.stretch
: stretches the grid items to fill the container vertically (this is the default value).
As an example:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
align-content: center;
}
In this example:
- The
align-content
property is set to center, which will align the grid items at the center of the grid container along the vertical axis.
You can also use the align-items
property to align the individual grid items within the grid cells, and the align-self
property to align a specific grid item within its cell.
Example
Here's an example of using the align-content
property:
Editor
In this example:
- We have a
div
element with a class of"grid-container"
that contains ninediv
elements with a class of"grid-item"
. - The
"grid-container"
element has adisplay
property of "grid", which creates a CSS Grid layout. - The
grid-template-columns
property is set to"repeat(3, 1fr)"
, which creates three columns with equal widths. - The
grid-template-rows
property is set to"repeat(3, 100px)"
, which creates three rows with a height of100
pixels. - The
grid-gap
property is set to10
pixels, which adds spacing between the"grid-item"
elements. - The
align-content
property is set to"space-around"
, which distributes the space evenly between the rows and adds equal spacing between each row. - The
grid-item
elements have a background color of"#ccc"
, padding of 20 pixels, a font size of
30` pixels, and text centered.