W3.CSS 6 Grid Helpers
The w3-grid class creates a basic grid container.
W3.CSS expands CSS Grid with helper classes for common columns, responsive auto grids, spacing, and spanning.
The column and auto-grid helpers also create grid containers, so you do not need
to add w3-grid separately.
Note
W3.CSS grid helpers are a version 6 feature.
Version 6 is now in final beta, and is expected to be released in November 2026.
Basic Grid Containers
The w3-grid class creates a basic grid container.
Without column definitions, grid items appear in a single column.
The w3-grid-padding class creates a grid container with a 16px gap.
Example
<h3>Basic Grid</h3>
<div class="w3-grid">
<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>Grid with Gap</h3>
<div class="w3-grid-padding">
<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 »
Fixed Grid Columns
The fixed column helpers create two, three, or four equal-width columns.
These helpers keep the same number of columns on smaller screens.
| 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. |
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 »
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 |
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.
Example
<h3>Small Auto Grid</h3>
<div class="w3-grid-auto-small 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>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>Large Auto Grid</h3>
<div class="w3-grid-auto-large 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
Use the span helpers to make grid items cover two columns, three columns, or the full grid width.
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-green">One</div>
<div class="w3-container w3-orange">Two</div>
<div class="w3-container w3-red w3-grid-span-3">Span 3</div>
<div class="w3-container w3-green">Three</div>
<div class="w3-container w3-black w3-grid-span-all">Span All</div>
</div>
Try It Yourself »
Grid RTL
CSS Grid follows the document direction naturally.
Example
<div class="w3-grid-3 w3-gap w3-rtl">
<div class="w3-container w3-red">واحد</div>
<div class="w3-container w3-green">اثنان</div>
<div class="w3-container w3-blue">ثلاثة</div>
</div>
Try It Yourself »
