Nearby lessons
6 of 15🔲 CSS Grid Container
📌 What is a Grid Container?
The grid container is the parent element where the CSS Grid layout starts. 🎯 It defines the grid structure and controls how grid items (children) are placed.
Using display: grid or display: inline-grid turns any HTML element into a grid container.
This section covers each grid container property with clear examples so you can confidently build complex, responsive layouts using CSS Grid. 🚀🎨
📋 What Can Grid Container Do?
- 📦 Create rows and columns with ease
- 🧩 Place items in precise grid locations
- ⚙️ Control spacing, alignment, and gaps
🔸 justify-content Property
| Attribute | Value | Description |
|---|---|---|
justify-content | space-evenly | Equal space around and between items |
justify-content | space-around | Equal space around items (half-size on ends) |
justify-content | space-between | Equal space between items (no space on ends) |
justify-content | center | Items centered in container |
justify-content | start | Items packed at start (default) |
justify-content | end | Items packed at end |
⚖️
justify-content: space-evenly - Equal space around and between all itemsExample04
🔄
justify-content: space-around - Equal space around items (half-size on ends)Example05
↔️
justify-content: space-between - Equal space between items (no space on ends)Example06
🎯
justify-content: center - Items centered in containerExample07
⬅️
justify-content: start - Items packed at start (default)Example08
➡️
justify-content: end - Items packed at endExample09
🔸 align-content Property
| Attribute | Value | Description |
|---|---|---|
align-content | space-evenly | Equal space around and between rows |
align-content | space-around | Equal space around rows (half-size on ends) |
align-content | space-between | Equal space between rows (no space on ends) |
align-content | center | Rows centered in container |
align-content | start | Rows packed at start (default) |
align-content | end | Rows packed at end |
⚖️
align-content: space-evenly - Equal space around and between all rowsExample11
🔄
align-content: space-around - Equal space around rows (half-size on ends)Example12
↔️
align-content: space-between - Equal space between rows (no space on ends)Example13
🎯
align-content: center - Rows centered in containerExample14
⬆️
align-content: start - Rows packed at start (default)Example15
⬇️
align-content: end - Rows packed at endExample16
🔸 place-content Property
| Attribute | Value | Description |
|---|---|---|
place-content | normal | Default behavior for content alignment |
place-content | stretch | Stretches items to fill the container |
place-content | start | Aligns content to the start (top/left) |
place-content | end | Aligns content to the end (bottom/right) |
place-content | center | Centers content vertically and horizontally |
place-content | space-between | Equal space between rows and columns |
place-content | space-around | Equal space around rows and columns |
place-content | space-evenly | Equal space around and between rows/columns |
place-content | end start | Vertically aligned to end, horizontally to start |
place-content | space-between start | Vertical: space-between, Horizontal: start |
place-content | space-around end | Vertical: space-around, Horizontal: end |
📄 place-content: normal
Default content positioning.
Example18
📏 place-content: stretch
Content stretches to fill space.
Example19
⬅️ place-content: start
Content aligned to top/left.
Example20
➡️ place-content: end
Content aligned to bottom/right.
Example21
🎯 place-content: center
Content centered both vertically and horizontally.
Example22
↔️ place-content: space-between
Equal spacing between content blocks.
Example23
🔄 place-content: space-around
Equal spacing around each content block.
Example24
⚖️ place-content: space-evenly
Equal spacing around and between content.
Example25
📍 place-content: end start
Bottom vertically, left horizontally.
Example26
🧭 place-content: space-between start
Vertically spaced, horizontally left-aligned.
Example27
🎌 place-content: space-around end
Vertically spaced, horizontally right-aligned.
Example28