W3.CSS 6 Grid Helpers
Grid Helper Classes
The w3-grid class creates a basic grid container.
W3.CSS expands CSS Grid with helper classes for:
- Fixed grid columns
- Spacing (Gaps)
- Responsive auto columns
- Spanning
Fixed Grid Columns
The fixed column helpers create two, three, or four equal-width columns.
| Class | Description |
|---|---|
w3-grid-2 | Creates 2 equal-width columns. |
w3-grid-3 | Creates 3 equal-width columns. |
w3-grid-4 | Creates 4 equal-width columns. |
Two Columns
1
2
Three Columns
1
2
3
Four Columns
1
2
3
4
Example
<h3>Two Columns</h3>
<div class="w3-grid-2 w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-blue">Two</div>
</div>
<h3>Three Columns</h3>
<div class="w3-grid-3 w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Four Columns</h3>
<div class="w3-grid-4 w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
<div class="w3-container w3-orange">Four</div>
</div>
Try It Yourself »
Note
Fixed Grid helpers displays the same number of columns on smaller screens.
Grid Gaps
The gap helpers work with both Grid and Flexbox.
| Class | Description |
|---|---|
w3-gap-small | Creates an 8px gap between rows and columns |
w3-gap | Creates a 16px gap between rows and columns |
w3-gap-large | Creates a 24px gap between rows and columns |
Small Gap
1
2
3
Normal Gap
1
2
3
Large Gap
1
2
3
Example
<h3>Small Gap</h3>
<div class="w3-grid-3 w3-gap-small">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Normal Gap</h3>
<div class="w3-grid-3 w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
<h3>Large Gap</h3>
<div class="w3-grid-3 w3-gap-large">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
</div>
Try It Yourself »
Responsive Auto Grid
The auto-grid helpers automatically change the number of columns based on available width.
| Class | Minimum width |
|---|---|
w3-grid-auto-xsmall | 150px |
w3-grid-auto-small | 200px |
w3-grid-auto | 250px |
w3-grid-auto-large | 300px |
w3-grid-auto-xlarge | 350px |
Columns expand to fill the available space and can shrink below these widths to fit a narrower container.
Resize the browser window to see the effect.
XSmall Auto Grid
One
Two
Three
Four
Five
Six
Normal Auto Grid
One
Two
Three
Four
Five
Six
XLarge Auto Grid
One
Two
Three
Four
Five
Six
Example
<h3>XSmall Auto Grid</h3>
<div class="w3-grid-auto-xsmall w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
<div class="w3-container w3-orange">Four</div>
</div>
<h3>Normal Auto Grid</h3>
<div class="w3-grid-auto w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
<div class="w3-container w3-orange">Four</div>
</div>
<h3>XLarge Auto Grid</h3>
<div class="w3-grid-auto-xlarge w3-gap">
<div class="w3-container w3-red">One</div>
<div class="w3-container w3-green">Two</div>
<div class="w3-container w3-blue">Three</div>
<div class="w3-container w3-orange">Four</div>
</div>
Try It Yourself »
Grid Spanning
The span helpers make grid items cover two columns, three columns or full width.
| Class | Description |
|---|---|
w3-grid-span-2 | Grid item spans 2 columns. |
w3-grid-span-3 | Grid item spans 3 columns. |
w3-grid-span-all | Grid item spans all columns. |
Span 2
3
4
Span 3
4
Span All
Example
<div class="w3-grid-4 w3-gap">
<div class="w3-container w3-blue w3-grid-span-2">Span 2</div>
<div class="w3-container w3-blue">One</div>
<div class="w3-container w3-blue">Two</div>
<div class="w3-container w3-blue w3-grid-span-3">Span 3</div>
<div class="w3-container w3-blue">Three</div>
<div class="w3-container w3-blue w3-grid-span-all">Span All</div>
</div>
Try It Yourself »
Grid Areas
Named grid areas can be used for more advanced page layouts.
The first column is 150px wide, and the second column uses the remaining space:
Header
Header 2
This is the right column.
Both columns have equal width.
Example
<style>
.myPage {
grid-template-columns:1fr 1fr;
grid-template-areas:
"myHeader myHeader"
"myLeft myRight"
"myFooter myFooter";
}
</style>
<body class="myPage w3-grid">
<div class="w3-container w3-blue" style="grid-area:myHeader">
<h2>Header</h2>
</div>
<div class="w3-container w3-light-grey" style="grid-area:myLeft">
<h3>Header 1</h3>
<p>This is the left column.</p>
</div>
<div class="w3-container w3-pale-blue" style="grid-area:myRight">
<h2>Header 2</h2>
<p>This is the right column.</p>
</div>
<div class="w3-container w3-dark-grey" style="grid-area:myFooter">
<p>Footer</p>
</div>
Try it Yourself »
"myHeader myHeader" means the first row has two
columns, and header occupies both.
"myLeft myRight" means the second row has
myLeft in the first column and myRight in the second.
"myFooter myFooter" means the third row has two
columns, and footer occupies both.
Grid RTL
CSS Grid follows the document direction naturally.
Example
<div class="w3-grid-3 w3-gap w3-rtl">
<div class="w3-container">واحد</div>
<div class="w3-container">اثنان</div>
<div class="w3-container">ثلاثة</div>
</div>
Try It Yourself »
