W3.CSS Responsive Grid
Grid Layout
A grid is a layout system for rows and columns.
The grid layout makes it easier to design complex and responsive web pages.
A grid consists of a parent grid element containing one or more grid items.
1
2
3
4
5
6
7
8
The w3-grid Class
The w3-grid class creates a parent container for grid items.
The children of the grid container automatically become grid items.
Example
<div class="w3-grid"">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Example
<div class="w3-grid-padding"">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Note
w3-grid and w3-flex is new in W3.CSS 5.0.
w3-grid vs w3-flex
w3-grid is for two-dimensional layout, with rows AND columns.
w3-flex is for one-dimensional layout, with rows OR columns.
CSS Properties
Many standard CSS properties can be used for a grid container:
grid-templategrid-template-rowsgrid-template-columnsgrid-template-areasgaprow-gapcolumn-gapgrid-columngrid-column-startgrid-column-endgrid-rowgrid-row-startgrid-row-endjustify-contentalign-contentgrid-auto-rowsgrid-auto-columns
The grid-template-columns Property
The grid-template-columns property
specifies the number of columns in the grid and the widths of each column.
Values can be auto (automatic), fr
(fractions), px (pixels), %
(percentages) or any combination.
Examples
<div class="w3-grid" style="grid-template-columns:auto auto auto">
<div class="w3-grid" style="grid-template-columns:1fr 2fr">
<div class="w3-grid" style="grid-template-columns:150px auto">
<div class="w3-grid" style="grid-template-columns:25% auto">
You can also use the repeat() function:
Examples
<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">
Track Repeat
Track repeat uses an integer to set the repeat count a size values to set track sizes.
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])
Auto Repeat
Auto repeat uses auto-fill or auto-fit to set the repeat count a fixed size to set track sizes.
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])
Fixed Repeat
Fixed repeat uses an integer to set the repeat count and a fixed size to set track sizes.
repeat(4, 250px)repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])
The grid-template-rows Property
The grid-template-rows property
specifies the number of rows in the grid and the height of each row.
Values can be auto, px (pixels)
or % (percentages).
The grid-template Property
The grid-template property is a shorthand for grid-template-rows and grid-template-columns.
The gap Property
The gap property sets the gap (spacing) between the rows and columns.
Example
<div class="w3-grid" style="gap:2px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-template-areas Property
The grid-template-areas property specifies areas within the grid layout.
Example
<div class="w3-grid" style="grid-template-areas"myArea myArea . . .">
<div style="grid-area:myArea">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The column-gap Property
The column-gap property sets the gap (spacing) between the columns.
Example
<div class="w3-grid" style="column-gap:16px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The row-gap Property
The row-gap property sets the gap (spacing) between the rows.
Example
<div class="w3-grid" style="row-gap:16px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-column-start Property
The grid-column-start property specifies the column where to start an item.
Example
<div class="w3-grid" style="template-columns:auto auto auto">
<div style="grid-column-start:2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-column-end Property
The grid-column-start property specifies the column where to end an item.
Example
<div class="w3-grid" style="template-columns:auto auto auto">
<div style="grid-column-end:span 2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-column Property
The grid-column property specifies the column where to start and end a grid item.
Example
<div class="w3-grid" style="template-columns:auto auto auto">
<div style="grid-column:1/span 2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-row-start Property
The grid-row-start property specifies the row where to start a grid item.
Example
<div class="w3-grid" style="template-columns:auto auto">
<div style="grid-row-start:2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-row-end Property
The grid-row-start property specifies the row where to end a grid item.
Example
<div class="w3-grid" style="template-columns:auto auto auto">
<div style="grid-row-end:span 2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-row Property
The grid-row property specifies the row where to start and end a grid item.
Example
<div class="w3-grid" style="template-columns:auto auto auto">
<div style="grid-row:1/span 2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The justify-content Property
The justify-content property aligns the items in the grid.
Examples
<div class="w3-grid" style="justify-content: space-evenly">
<div class="w3-grid" style="justify-content: center">
<div class="w3-grid" style="justify-content: between">
<div class="w3-grid" style="justify-content: around">
<div class="w3-grid" style="justify-content: start">
<div class="w3-grid" style="justify-content: end">
The align-content Property
The align-content property aligns the items vertically in the grid.
Examples
<div class="w3-grid" style="align-content: space-evenly">
<div class="w3-grid" style="align-content: center">
<div class="w3-grid" style="align-content: between">
<div class="w3-grid" style="align-content: around">
<div class="w3-grid" style="align-content: start">
<div class="w3-grid" style="align-content: end">
The grid-auto-rows Property
The grid-auto-rows property specifies a default row size.
Example
<div class="w3-grid" style="grid-auto-rows:150px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
The grid-auto-columns Property
The grid-auto-columns property specifies a default column size.
Example
<div class="w3-grid" style="grid-auto-columns:150px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
General CSS Properties
| Property | Description |
|---|---|
| align-content | Vertically aligns the whole grid inside the container (when total grid size is smaller than container) |
| align-items | Aligns content in a grid item along the column axis |
| align-self | Aligns the content for a specific grid item along the column axis |
| display | Specifies the display behavior (the type of rendering box) of an element |
| column-gap | Specifies the gap between the columns |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-start | Specifies where to start the grid item |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| justify-content | Horizontally aligns the whole grid inside the container (when total grid size is smaller than container) |
| justify-self | Aligns the content for a specific grid item along the row axis |
| place-self | A shorthand property for the align-self and the justify-self properties |
| place-content | A shorthand property for the align-content and the justify-content properties |
| row-gap | Specifies the gap between the grid rows |
