CSS Grid Container
A CSS Grid Container is an element that becomes a Grid Container when the display property is set to grid.
Once an element becomes a Grid Container, its direct child elements become Grid Items and can be arranged into rows and columns.
What Is a Grid Container?
The parent element that contains Grid Items is called the Grid Container.
CSS Grid is activated using: display: grid;
The direct children of this element automatically become Grid Items.
Basic Syntax
.container {
display: grid;
}Grid Container Structure
Parent element = Grid Container | Direct children = Grid Items
Example 1: Creating a Grid Container
.container {
display: grid;
}The display: grid; declaration changes the layout behavior of the parent element.
Its direct children are now treated as Grid Items.
Example 2: Grid Container with Columns
A Grid Container can define the number and size of columns using grid-template-columns.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}Output
The Grid Container creates three equal columns. Additional items automatically move to the next row.
Grid Container and Grid Items
Grid Container
The parent element with display: grid;. It controls the overall Grid layout.
Grid Items
The direct children of the Grid Container. They are placed inside Grid rows and columns.
Important Grid Container Properties
| Property | Purpose |
|---|---|
| display | Creates the Grid Container. |
| grid-template-columns | Defines the Grid columns. |
| grid-template-rows | Defines the Grid rows. |
| gap | Creates spacing between Grid Items. |
| justify-items | Controls horizontal alignment of Grid Items inside their cells. |
| align-items | Controls vertical alignment of Grid Items inside their cells. |
Adding Space Between Grid Items
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}The gap: 20px; property creates 20 pixels of space between the Grid Items.
Container Properties vs Item Properties
| Container | Item |
|---|---|
| display: grid; | grid-column |
| grid-template-columns | grid-row |
| grid-template-rows | grid-area |
| gap | align-self |
Example 🤓🌍
A course listing page can use a Grid Container to display multiple course cards in a structured layout.
.courses {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.course-card {
padding: 20px;
border: 1px solid #2563eb;
}The .courses element becomes the Grid Container.
Each .course-card becomes a Grid Item.
Three equal columns are created with a 20-pixel gap between the cards.
Advantages of a Grid Container
Structured Layout
Rows and columns provide a clear structure for page layouts.
Flexible Sizing
Grid tracks can use flexible units such as fr.
Responsive Layouts
Grid can be combined with media queries for responsive designs.
Summary
A Grid Container is created using display: grid;. Its direct children become Grid Items. Container properties such as grid-template-columns, grid-template-rows, and gap control the overall Grid structure and spacing.