CSS Grid

CSS Grid Container

A CSS Grid Container is an HTML element that uses the CSS Grid Layout system to arrange its child elements in rows and columns.

CSS Grid is a powerful two-dimensional layout system that allows you to control both: The supporting concepts are explained in CSS Grid Columns and CSS Grid Rows.

Rows
Columns

Unlike Flexbox, which primarily works in one direction (row or column), CSS Grid can manage both directions simultaneously.

Grid Layout is commonly used for:

Website layouts
Dashboards
Image galleries
Product grids
Responsive designs

Syntax

To create a grid container, use the display: grid; property.

CSS Grid Container Syntax

css

.container {
    display: grid;
}

CSS Grid Container Example

css

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

This creates a grid with three equal-width columns.

Attributes

Property	Description	Example
display	Creates a grid container	display: grid;
grid-template-columns	Defines column structure	grid-template-columns: 1fr 1fr;
grid-template-rows	Defines row structure	grid-template-rows: 100px 100px;
gap	Sets spacing between grid items	gap: 10px;
justify-items	Aligns items horizontally	justify-items: center;

Example

CSS Grid Container Complete Example

html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Container Example</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px;
            border: 2px solid black;
            padding: 10px;
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
            border: 1px solid #333;
        }
    </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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
display: grid	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

Grid works on direct child elements only.
display: grid; creates a grid container.
Grid is ideal for two-dimensional layouts.
Modern websites frequently use CSS Grid for page structures.
Grid and Flexbox are often used together.

Flexbox vs Grid

Feature	Flexbox	Grid
Layout Type	One-dimensional	Two-dimensional
Controls Rows	Limited	Yes
Controls Columns	Limited	Yes
Best For	Navigation, toolbars	Full page layouts

Example of a 4-Column Grid

4-Column Grid Example

css

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

Creates four equal-width columns.

Conclusion

A CSS Grid Container is the foundation of the CSS Grid Layout system. By using display: grid, you can create structured row-and-column layouts that are flexible, responsive, and easier to manage than traditional layout techniques.

PreviousFlex Item Sizing NextCSS Grid Columns