W3.CSS Responsive Grid
Grid Layout
Agrid is a layout system forrows andcolumns.
The grid layout makes it easier to design complex and responsive web pages.
A grid consists of aparent grid element containing one or moregrid items.
1
2
3
4
5
6
7
8
Thew3-grid Class
Thew3-grid class creates a parent container for grid items.
The children of the grid container automatically become grid items.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Note
w3-grid andw3-flex is new inW3.CSS 5.0.
w3-grid vs w3-flex
w3-grid is fortwo-dimensional layout, with rows AND columns.
w3-flex is forone-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
Thegrid-template-columns Property
Thegrid-template-columns property specifies the number of columns in the grid and the widths of each column.
Values can beauto (automatic),fr(fractions),px (pixels),%(percentages) or any combination.
Examples
You can also use therepeat() function:
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])
Thegrid-template-rows Property
Thegrid-template-rows property specifies the number of rows in the grid and the height of each row.
Values can beauto,px (pixels)or% (percentages).
Thegrid-template Property
Thegrid-template property is a shorthand for grid-template-rows and grid-template-columns.
Thegap Property
Thegap property sets the gap (spacing) between the rows and columns.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-template-areas Property
Thegrid-template-areas property specifies areas within the grid layout.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thecolumn-gap Property
Thecolumn-gap property sets the gap (spacing) between the columns.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Therow-gap Property
Therow-gap property sets the gap (spacing) between the rows.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-column-start Property
Thegrid-column-start property specifies the column where to start an item.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-column-end Property
Thegrid-column-start property specifies the column where to end an item.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-column Property
Thegrid-column property specifies the column where to start and end a grid item.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-row-start Property
Thegrid-row-start property specifies the row where to start a grid item.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-row-end Property
Thegrid-row-end property specifies the row where to end a grid item.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-row Property
Thegrid-row property specifies the row where to start and end a grid item.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thejustify-content Property
Thejustify-content property aligns the items in the grid.
Examples
Thealign-content Property
Thealign-content property aligns the items vertically in the grid.
Examples
Thegrid-auto-rows Property
Thegrid-auto-rows property specifies a default row size.
Example
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Thegrid-auto-columns Property
Thegrid-auto-columns property specifies a default column size.
Example
<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 therow-gap and thecolumn-gap properties |
| grid | A shorthand property for thegrid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and thegrid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for thegrid-row-start,grid-column-start,grid-row-end, andgrid-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 thegrid-column-start and thegrid-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 thegrid-row-start and thegrid-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 thegrid-template-rows,grid-template-columns andgrid-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 thealign-self and the justify-self properties |
| place-content | A shorthand property for thealign-content and the justify-content properties |
| row-gap | Specifies the gap between the grid rows |
