CSS display: grid property
The display: grid property in CSS is used to create a grid-based layout system, known as CSS Grid Layout. This layout model allows you to design complex, responsive web layouts with rows and columns. The CSS Grid Layout provides a powerful way to control the arrangement and alignment of grid items within a grid container.
Basic Syntax
selector {
display: grid;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightcoral;
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
In this example, the .container is defined as a grid container with three equal columns. The grid items within it are arranged automatically into these columns.
Key Concepts of CSS Grid Layout
1. Grid Container
The element with display: grid becomes a grid container. All direct children of this element are grid items.
.container {
display: grid; /* Defines the container as a grid */
}
2. Grid Lines
Grid lines are the lines that separate the rows and columns in the grid. They are numbered starting from 1, and you can reference them to place grid items precisely.
3. Grid Tracks
Grid tracks are the space between two adjacent grid lines. They are the rows and columns in the grid.
4. Grid Cells
A grid cell is the space between two adjacent row and column lines. It's the smallest unit in the grid layout.
5. Grid Areas
A grid area is a rectangular space surrounded by four grid lines. Grid items can span multiple grid cells to cover these areas.
Properties of Grid Layout
1. grid-template-columns and grid-template-rows
These properties define the number and size of the columns and rows in the grid.
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Three columns with specific sizes */
grid-template-rows: auto 100px; /* Two rows with auto and fixed sizes */
}
2. grid-gap, grid-row-gap, and grid-column-gap
These properties define the spacing between grid items.
.container {
display: grid;
grid-gap: 10px; /* Space between both rows and columns */
}
3. grid-column and grid-row
These properties control the placement of grid items within the grid.
.item {
grid-column: 1 / 3; /* Spans from column line 1 to 3 */
grid-row: 2 / 4; /* Spans from row line 2 to 4 */
}
4. grid-template-areas
This property allows you to define named grid areas, making it easier to arrange grid items.
.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
5. justify-items and align-items
These properties control the alignment of grid items within their grid areas.
.container {
display: grid;
justify-items: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
}
6. justify-content and align-content
These properties control the alignment of the grid within the grid container.
.container {
display: grid;
justify-content: center; /* Center the grid horizontally within the container */
align-content: center; /* Center the grid vertically within the container */
}
Practical Examples
Example 1: Basic Grid Layout
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* Two columns with different widths */
grid-gap: 10px; /* Space between items */
}
.item {
background-color: lightblue;
border: 1px solid blue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Example 2: Named Grid Areas
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; background-color: lightcoral; }
.main { grid-area: main; background-color: lightgreen; }
.sidebar { grid-area: sidebar; background-color: lightblue; }
.footer { grid-area: footer; background-color: lightgoldenrodyellow; }
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
</body>
</html>