W3.CSS Grid

❮ Previous Next ❯

W3.CSS Grid Layout

Grid is a layout system for arranging content in rows and columns.

The W3.CSS w3-grid class makes it easy to create Grid layouts.

Basic Grid Containers

The w3-grid class creates a grid container.

The direct children of a grid container become grid items.

By default, each grid items occupies a full row.

Item 1

Item 2

Item 3

Example

Try It Yourself »

Grid Gaps

The w3-gap class adds space between grid items.

1

2

3 Example

Try it Yourself »

Grid Template Columns

The CSS grid-template-columns property defines the columns in a grid.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Example

Try it Yourself »

Note

The w3-grid class creates the grid container.

The CSS style grid-template-columns:1fr 1fr 1fr defines 3 grid items, each one fr (frame) wide.

Quiet day at the beach. Cold, but beautiful

Example

Try it Yourself »

The fr Unit

The CSS grid-template-columns property defines the columns in a grid.

The fr unit represents a fraction of the available space.

grid-template-columns:1fr 1fr 1fr will create 3 columns equal width columns:

1fr

Example

Try it Yourself »

grid-template-columns:1fr 2fr will create one column 1 frame wide and one column 2 frames wide:

1fr

2fr

Example

Try it Yourself »

Grid Template Columns Values

grid-template-columns values can be:

Value	Explanation
1fr	The column receives 1 share of the remaining space.
2fr	The column receives 2 shares of the remaining space.
3fr	The column receives 3 shares of the remaining space.
auto	The column width is determined automatically.
150px	The column has a fixed width of 150 pixels.
25%	The column uses 25% of the grid container's width.
min-content	The column uses the smallest width its content can occupy.
max-content	The column uses the width needed to display its content without wrapping.
minmax(150px, 1fr)	The column is at least 150 pixels wide and can grow.
fit-content(300px)	The column fits its content, normally limited to 300 pixels.
repeat(3, 1fr)	Creates three columns, each receiving one share of the remaining space.
repeat(auto-fit, minmax(200px, 1fr))	Creates as many columns as fit. Each column is at least 200 pixels wide. Empty columns collapse.
repeat(auto-fill, minmax(200px, 1fr))	Creates as many columns as fit. Each column is at least 200 pixels wide. Empty columns remain.
none	Defines no explicit columns. Columns are created automatically.

You can combine values, such as 150px 1fr 2fr, to create columns with different widths.

Examples

The repeat() Function

The CSS repeat() function makes repeated columns easier to write.

Example

Instead of:

grid-template-columns: 1fr 1fr 1fr 1fr;

You can write:

grid-template-columns: repeat(4, 1fr);

Examples

Try it Yourself »

Try it Yourself »

Responsive Grid

CSS Grid can automatically change the number of columns when the available width changes.

The following grid creates as many columns as will fit in the available space.

Each column has a minimum width of 200px, but can shrink to fit a narrower container.

London

England

Paris

France

Rome

Italy

Example

<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px">

<div class="w3-container w3-card">London</div>
<div class="w3-container w3-card">Paris</div>
<div class="w3-container w3-card">Rome</div>

</div>

Try it Yourself »

Resize the browser window to see the number of columns change automatically.

Spanning Columns

A grid item can span more than one column.

2 columns

1 column

Example

<div class="w3-grid" style="grid-template-columns:repeat(3,1fr)">

<div style="grid-column:span 2">Spans 2 columns</div>
<div>1 column</div>
<div>1 column</div>
<div>1 column</div>
<div>1 column</div>

</div>

Try it Yourself »

Build a Page Layout

Grid is useful for creating complete page layouts.

Example

The first column is 150px wide, and the second column (1fr) uses the remaining space.

Main Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Example

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

<div class="w3-container w3-light-grey">
<h2>Menu</h2>
</div>

<div class="w3-container">
<h2>Main Content</h2>
</div>

</div>

Try it Yourself »

Grid vs Flexbox

Grid and Flexbox are both modern CSS layout systems.

Layout	Best For
Grid	Rows and columns
Flexbox	A row or a column

Use Grid when the layout needs to work in two dimensions.

Use Flexbox when items mainly need to be arranged in one direction.

CSS Grid Properties

The w3-grid class creates a CSS Grid container.

Standard CSS Grid properties can then be used to control the grid:

Property	Description	Try it
align-content:center	Vertically aligns a grid in the center of its container	Try it
align-content:end	Vertically aligns a grid at the end of its container	Try it
align-content:space-around	Vertically aligns a grid with space around the rows	Try it
align-content:space-between	Vertically aligns a grid with space between the rows	Try it
align-content:space-evenly	Vertically aligns a grid evenly in its container	Try it
align-content:start	Vertically aligns a grid at the start of its container	Try it
align-items	Aligns grid items stretched	Try it
align-items:baseline	Aligns grid items at the baseline	Try it
align-items:center	Aligns grid items in the center	Try it
align-items:end	Aligns grid items at the end	Try it
align-items:start	Aligns grid items at the start	Try it
align-items:stretch	Aligns grid items stretched (default)	Try it
column-gap	Defines gaps between columns	Try it
gap	Defines gaps between rows and columns	Try it
grid-area	Defines a named grid area	Try it
grid-auto-columns	Defines the size of automatically created columns	Try it
grid-auto-rows	Defines the size of automatically created rows	Try it
grid-column	Defines where an item starts and ends horizontally	Try it
grid-row	Defines where a grid item starts and ends	Try it
grid-row-end	Defines where a grid item ends	Try it
grid-row-start	Defines where a grid item starts	Try it
grid-template	Defines grid rows, columns, and areas	Try it
grid-template-areas	Defines named grid areas	Try it
grid-template-columns:auto	Defines automatic grid columns	Try it
grid-template-columns:1fr	Defines grid columns width in fractions	Try it
grid-template-columns:25%	Defines grid columns width in percent	Try it
grid-template-columns:150px	Defines grid columns width in pixels	Try it
grid-template-columns:repeat	Defines repeated grid columns width	Try it
grid-template-rows	Defines grid rows	Try it
justify-content:center	Aligns the grid horizontally	Try it
justify-content:end	Aligns the grid horizontally	Try it
justify-content:space_around	Aligns the grid horizontally	Try it
justify-content:space-between	Aligns the grid horizontally	Try it
justify-content:space_evenly	Aligns the grid horizontally	Try it
justify-content:start	Aligns the grid horizontally	Try it
row-gap	Defines gaps between rows	Try it

Want to Write Less CSS?

All the CSS properties described above, can be difficult to learn and to use.

W3.CSS provides Grid helper classes for:

Fixed grid columns
Spacing (Gaps)
Responsive auto columns
Spanning

Helper classes make HTML shorter to write and easier to use.

W3.CSS Grid Helpers »

❮ Previous Next ❯

★ +1

W3Schools app NEW

W3.CSS

W3.CSS Colors

Web Building

W3.CSS Cert

W3.CSS Examples

W3.CSS References

W3.CSS Grid

W3.CSS Grid Layout

Basic Grid Containers

Item 1

Item 2

Item 3

Example

Grid Gaps

1

2

3

Example

Grid Template Columns

Example

Note

Example

The fr Unit

Example

Example

Grid Template Columns Values

Examples

The repeat() Function

Example

Examples

Responsive Grid

London

Paris

Rome

Example

Spanning Columns

2 columns

1 column

1 column

1 column

1 column

Example

Build a Page Layout

Example