CSS Grid Container

Written by Swapnil RajaUpdated 15 Aug 2026

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;
}

PreviousFlex Item Sizing NextCSS Grid Columns

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;

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>

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

CSS Grid Container

Syntax

Attributes

Example

Browser Support

Notes

Flexbox vs Grid

Example of a 4-Column Grid

Conclusion