CSS Grid

CSS Grid Layout Example

A CSS Grid Layout combines rows, columns, and spacing to create structured and responsive web page layouts.

In real-world projects, CSS Grid is commonly used for:

Website layouts
Dashboards
Admin panels
Product galleries
Portfolio websites

This lesson demonstrates how to build a complete grid layout using the concepts learned in previous lessons: The supporting concepts are explained in Grid Placement and Grid Areas.

Grid Container
Grid Columns
Grid Rows
Grid Gap

Syntax

A typical grid layout uses:

CSS Grid Layout Syntax

css

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

This creates a responsive three-column grid with spacing between items.

Attributes

Property	Description	Example
display	Creates grid container	display: grid;
grid-template-columns	Defines columns	repeat(3, 1fr);
grid-template-rows	Defines rows	auto;
gap	Sets spacing between items	gap: 20px;
repeat()	Repeats rows or columns	repeat(4, 1fr);

Example

CSS Grid Layout Example Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Layout Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            padding: 20px;
        }
        .card {
            background-color: lightblue;
            border: 1px solid #333;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
        <div class="card">Card 5</div>
        <div class="card">Card 6</div>
    </div>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
CSS Grid layout	57	16	52	10.1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

Notes

CSS Grid is ideal for two-dimensional layouts.
The repeat() function reduces repetitive code.
Grid layouts automatically adapt to content placement.
Gap spacing keeps layouts organized.
CSS Grid works well with responsive design techniques.

Responsive Grid Example

css

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

Automatically adjusts the number of columns based on available screen width.

Common Grid Layouts

Layout Type	Columns
Two Column Layout	repeat(2, 1fr)
Three Column Layout	repeat(3, 1fr)
Four Column Layout	repeat(4, 1fr)
Responsive Layout	auto-fit + minmax

Conclusion

CSS Grid Layout provides a powerful and flexible way to create modern web page structures. By combining grid containers, rows, columns, and gaps, developers can build clean, responsive, and maintainable layouts with minimal code.

PreviousCSS Grid Gap NextGrid Placement