The display: grid property is a powerful CSS layout model that allows you to create complex, two-dimensional layouts with rows and columns. It provides a more straightforward and flexible way to design web page structures compared to older methods like floats or positioning. By declaring display: grid on a container element, you can then define the structure and arrangement of its direct children, known as grid items.
Example 1: Basic Grid Container
.grid-container {
display: grid; /* Defines the element as a grid container */
grid-template-columns: auto auto auto; /* Creates three columns of equal width */
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
Explanation
This code establishes a grid container with three columns. The grid-template-columns property with the value auto auto auto tells the browser to automatically create three columns that share the available space equally. The direct children of .grid-container will become grid items and flow into the available grid cells.
Example 2: Sizing Columns with fr Units
.grid-container {
display: grid; /* Activates the grid layout module */
grid-template-columns: 1fr 2fr 1fr; /* Distributes space in a 1:2:1 ratio */
gap: 10px; /* Adds a 10px gap between grid items */
}
Explanation
The fr unit represents a fraction of the available space in the grid container. In this example, grid-template-columns: 1fr 2fr 1fr; divides the container into four fractional units. The first and third columns each take up one fraction, while the second column is twice as wide, taking up two fractions of the space.
Example 3: Explicitly Placing Items with grid-column and grid-row
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Creates 3 flexible columns */
}
.item1 {
grid-column: 1 / 3; /* Item starts at column line 1 and ends at column line 3 */
grid-row: 1; /* Item is placed in the first row */
}
Explanation
You can precisely place grid items using grid-column and grid-row. Here, .item1 is instructed to start at the first vertical grid line and span across to the third, effectively occupying the space of the first two columns. It is also explicitly placed in the first row.
Example 4: Naming Grid Areas with grid-template-areas
.grid-container {
display: grid;
grid-template-areas:
'header header header'
'menu main right'
'footer footer footer'; /* Defines a layout with named areas */
}
.item-header { grid-area: header; } /* Assigns this item to the 'header' area */
.item-menu { grid-area: menu; }
.item-main { grid-area: main; }
.item-right { grid-area: right; }
.item-footer { grid-area: footer; }
Explanation
The grid-template-areas property allows you to name grid cells and create a visual representation of your layout in the CSS. Each string represents a row, and the words define the named areas. You then assign elements to these named areas using the grid-area property.
Example 5: Using minmax() for Responsive Columns
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Creates responsive columns */
gap: 15px;
}
Explanation
This example creates a responsive grid without media queries. repeat(auto-fit, ...) tells the grid to fit as many columns as possible. The minmax(200px, 1fr) function ensures each column will be at least 200px wide but can grow to an equal fraction of the available space if there's room.
Example 6: Aligning Items with justify-items and align-items
.grid-container {
display: grid;
grid-template-columns: 150px 150px;
height: 200px;
justify-items: center; /* Centers items horizontally within their cells */
align-items: center; /* Centers items vertically within their cells */
}
Explanation
The justify-items property aligns the content inside a grid item along the row (inline) axis, while align-items aligns the content along the column (block) axis. Setting both to center will perfectly center each grid item within its designated grid cell.
Example 7: Controlling Content Flow with grid-auto-flow
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 50px);
grid-auto-flow: column; /* Fills the grid column by column */
}
Explanation
By default, grid items fill the grid row by row. The grid-auto-flow: column; property changes this behavior, causing items to be placed in order along the column axis first. If there aren't enough explicitly defined columns, new columns will be created automatically.