W3.CSS Responsive Fluid Grid - W3Schools

W3.CSS Responsive Grid ❮ Previous Next ❯

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>

Try it Yourself »

Example

<div class="w3-grid-padding""> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>

Try it Yourself »

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-template
• grid-template-rows
• grid-template-columns
• grid-template-areas
• gap
• row-gap
• column-gap
• grid-column
• grid-column-start
• grid-column-end
• grid-row
• grid-row-start
• grid-row-end
• justify-content
• align-content
• grid-auto-rows
• grid-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">

Try it Yourself »

<div class="w3-grid" style="grid-template-columns:1fr 2fr">

Try it Yourself »

<div class="w3-grid" style="grid-template-columns:150px auto">

Try it Yourself »

<div class="w3-grid" style="grid-template-columns:25% auto">

Try it Yourself »

You can also use the repeat() function:

Examples

<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">

Try it Yourself »

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).

Example

<div class="w3-grid" style="grid-template-rows:150px 150px">

Try it Yourself »

The grid-template Property

The grid-template property is a shorthand for grid-template-rows and grid-template-columns.

Example

<div class="w3-gridtemplate" style="grid-template:150px / auto auto">

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

The grid-row-end Property

The grid-row-end 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>

Try it Yourself »

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>

Try it Yourself »

The justify-content Property

The justify-content property aligns the items in the grid.

Examples

<div class="w3-grid" style="justify-content: space-evenly">

Try it Yourself »

<div class="w3-grid" style="justify-content: center">

Try it Yourself »

<div class="w3-grid" style="justify-content: between">

Try it Yourself »

<div class="w3-grid" style="justify-content: around">

Try it Yourself »

<div class="w3-grid" style="justify-content: start">

Try it Yourself »

<div class="w3-grid" style="justify-content: end">

Try it Yourself »

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">

Try it Yourself »

<div class="w3-grid" style="align-content: center">

Try it Yourself »

<div class="w3-grid" style="align-content: between">

Try it Yourself »

<div class="w3-grid" style="align-content: around">

Try it Yourself »

<div class="w3-grid" style="align-content: start">

Try it Yourself »

<div class="w3-grid" style="align-content: end">

Try it Yourself »

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>

Try it Yourself »

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>

Try it Yourself »

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

❮ Previous Next ❯ ★ +1 Sign in to track progress