The CSS Grid Layout Module is a powerful two-dimensional layout system that enables the creation of complex, responsive web designs. While Flexbox is designed for one-dimensional layouts (either a row or a column), Grid allows precise control over rows, columns, and the positioning of elements simultaneously.
To start using CSS Grid, you simply apply the display property to a container element.
Syntax:
.container {
display: grid; /* or inline-grid */
}
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto; /* Creates two equal columns */
gap: 10px; /* Space between grid items */
background-color: navy;
padding: 10px;
}
.grid-item {
background-color: lightblue;
color: navy;
padding: 20px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>IntricateDevo: Basic Grid</h3>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
In this example:
The .grid-container uses display: grid; to define a grid layout with two columns using grid-template-columns: auto auto; and a 10px gap between items.
CSS Grid introduces several new properties to control both the parent container and the individual child items. Below is a list of key CSS Grid properties:
| Property | Description |
|---|---|
grid-template-columns |
Sets the number and size of the columns in the grid. |
grid-template-rows |
Sets the number and height of the rows in the grid. |
gap |
Specifies the spacing (also called the gutter) between rows and columns. |
column-gap |
Defines the amount of space strictly between columns. |
row-gap |
Defines the amount of space strictly between rows. |
grid-template-areas |
Specifies named areas within the grid layout for intuitive placement. |
grid-column |
Shorthand property controlling the start and end column lines of an item. |
grid-row |
Shorthand property controlling the start and end row lines of an item. |
grid-area |
Shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end. |
grid-auto-flow |
Specifies exactly how auto-placed items flow into the grid (e.g., row or column). |
grid-auto-columns |
Sets the size of columns that are automatically generated implicitly. |
grid-auto-rows |
Sets the size of implicitly generated rows. |
Let's explore how CSS Grid handles different layout scenarios. We will frequently use the Fractional Unit (fr), which represents a fraction of the available space in the grid container.
Using the fr unit, we can easily create a three-column layout where each column takes up exactly one fraction (1fr) of the available space.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 Equal Columns */
gap: 10px;
background-color: navy;
padding: 10px;
}
.grid-item {
background-color: lightblue;
color: navy;
padding: 20px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Column 1</div>
<div class="grid-item">Column 2</div>
<div class="grid-item">Column 3</div>
<div class="grid-item">Column 1 (Row 2)</div>
<div class="grid-item">Column 2 (Row 2)</div>
<div class="grid-item">Column 3 (Row 2)</div>
</div>
</body>
</html>
Grid allows you to dictate exact proportions. By setting grid-template-columns: 1fr 2fr;, the second column will always be twice as wide as the first column.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 2nd col is 2x wider */
gap: 10px;
background-color: navy;
padding: 10px;
}
.grid-item {
background-color: #f4f4f9;
color: navy;
padding: 20px;
text-align: center;
font-weight: bold;
border: 2px solid lightblue;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1 (1fr)</div>
<div class="grid-item">Item 2 (2fr)</div>
<div class="grid-item">Item 3 (1fr)</div>
<div class="grid-item">Item 4 (2fr)</div>
</div>
</body>
</html>
Just like columns, you can control rows. If you want specific rows to behave differently, use grid-template-rows.
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 100px auto; /* Row 1 is 100px, Row 2 wraps content */
gap: 15px;
background-color: navy;
padding: 15px;
}
.grid-item {
background-color: lightblue;
color: navy;
padding: 15px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Row 1, Col 1 (100px tall)</div>
<div class="grid-item">Row 1, Col 2 (100px tall)</div>
<div class="grid-item">Row 2 (Auto height based on content)</div>
<div class="grid-item">Row 2 (Auto height based on content)</div>
</div>
</body>
</html>
fr unit and the minmax() function to create robust, responsive layouts that adapt seamlessly to various screen sizes.grid-template-areas. This maps out your layout visually in the CSS, drastically improving readability and maintainability.Which unit is specifically designed for CSS Grid to represent a fraction of the available space?