Clean β’ Professional
A CSS Grid Container is a parent element with display: grid or inline-grid that organizes its direct children (grid items) into rows and columns. It allows you to create flexible, responsive layouts and control spacing, alignment, and placement of items easily.

A Grid Container is the element where you apply display: grid or display: inline-grid.
This container controls how grid items (its direct children) are placed, sized, and aligned.
Example:
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: auto auto;
gap: 10px;
}
Defines the container as a grid.
grid: Creates a block-level grid.inline-grid: Creates an inline-level grid.<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: grid; /* or inline-grid */
grid-template-columns: 100px 100px 100px;
gap: 10px;
}
.item {
background: lightblue;
padding: 20px;
text-align: center;
}
These define the number and size of rows and columns in the grid.
Values :
px, %, fr, auto, minmax(min, max), repeat(count, value)Example :
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
.container {
display: grid;
grid-template-columns: 200px 1fr 2fr; /* 3 columns */
grid-template-rows: 100px auto; /* 2 rows */
gap: 10px;
}
.item {
background: peachpuff;
padding: 20px;
}
Lets you create named areas for better readability.
Values :
"header main"). β empty cellExample:
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 200px 1fr;
grid-template-rows: 80px auto 60px;
gap: 10px;
}
.header { grid-area: header; background: lightgreen; }
.sidebar { grid-area: sidebar; background: lightcoral; }
.main { grid-area: main; background: lightyellow; }
.footer { grid-area: footer; background: lightblue; }
Shorthand for defining rows, columns, and areas together.
Values :
grid-template-rows, grid-template-columns, and grid-template-areas.Example:
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>
.container {
display: grid;
grid-template:
"header header" 80px
"sidebar main" auto
"footer footer" 60px
/ 200px 1fr;
}
When you donβt explicitly define enough rows/columns, CSS creates them automatically.
These properties set the default size of such implicit tracks.
Values :
px, %, fr, auto, minmax()Example:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.container {
display: grid;
grid-template-columns: 200px;
grid-auto-rows: 150px; /* every new row will be 150px */
gap: 10px;
}
.item {
background: lavender;
text-align: center;
}
Controls how items are placed automatically when thereβs no specific positioning.
Values :
row, column, row dense, column denseExample :
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(2, 100px);
grid-auto-flow: column dense;
gap: 10px;
}
.item {
background: lightpink;
padding: 20px;
}
Defines spacing between grid items.
Values :
10px, 2em, %Example:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(2, 100px);
row-gap: 20px;
column-gap: 40px;
}
.item {
background: lightsteelblue;
padding: 15px;
}
Aligns items horizontally within their grid cells.
Values :
start, end, center, stretchExample:
<div class="container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
</div>
.container {
display: grid;
grid-template-columns: repeat(2, 150px);
justify-items: center;
}
.item {
background: lightseagreen;
padding: 20px;
}
Aligns items vertically within their grid cells.
Values :
start, end, center, stretchExample:
<div class="container">
<div class="item">Top</div>
<div class="item">Bottom</div>
</div>
.container {
display: grid;
grid-template-rows: 150px 150px;
align-items: end;
}
.item {
background: lightgoldenrodyellow;
padding: 10px;
}
Shorthand for align-items + justify-items.
Values :
center)start end)Example:
<div class="container">
<div class="item">Centered</div>
</div>
.container {
display: grid;
grid-template-columns: 200px;
grid-template-rows: 200px;
place-items: center; /* both horizontally & vertically */
}
.item {
background: lightsalmon;
padding: 20px;
}
Aligns the whole grid horizontally inside the container.
Values :
start, end, center, stretch,space-between, space-around, space-evenlyExample:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
</div>
.container {
display: grid;
grid-template-columns: 100px 100px;
justify-content: space-between;
width: 400px; /* to show effect */
}
.item {
background: lightcyan;
padding: 20px;
}
Aligns the whole grid vertically inside the container.
Values :
start, end, center, stretch,space-between, space-around, space-evenlyExample:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
</div>
.container {
display: grid;
grid-template-rows: 100px 100px;
height: 400px; /* extra height */
align-content: center;
}
.item {
background: lightgreen;
padding: 20px;
}
Shorthand for align-content + justify-content.
Values :
center)center space-between)Example:
<div class="container">
<div class="item">A</div>
<div class="item">B</div>
</div>
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
height: 400px;
width: 400px;
place-content: center space-between;
}
.item {
background: plum;
padding: 20px;
}

| Property | Description |
|---|---|
align-content | Vertically aligns grid inside container |
align-items | Aligns items along column axis |
display | Makes element grid or inline-grid |
column-gap | Space between columns |
row-gap | Space between rows |
gap | Shorthand for row-gap + column-gap |
grid | Shorthand for full grid definition |
grid-auto-columns | Default column size |
grid-auto-rows | Default row size |
grid-auto-flow | How auto-placed items are inserted |
grid-template | Shorthand for template rows/columns/areas |
grid-template-areas | Defines named areas layout |
grid-template-columns | Column sizes & count |
grid-template-rows | Row sizes |
justify-content | Horizontally aligns grid |
place-content | Shorthand for align + justify |