W3.CSS Grid
Grid Layout
CSS Grid is a layout system for arranging content in rows and columns.
The W3.CSS w3-grid class makes it easy to create CSS Grid layouts.
The w3-grid Class
The w3-grid class creates a grid container.
The direct children of a grid container automatically become grid items.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Example
<div class="w3-grid" style="grid-template-columns:1fr 1fr 1fr">
<div class="w3-container w3-blue"><h3>1</h3></div>
<div class="w3-container w3-blue"><h3>2</h3></div>
<div class="w3-container w3-blue"><h3>3</h3></div>
<div class="w3-container w3-blue"><h3>4</h3></div>
<div class="w3-container w3-blue"><h3>5</h3></div>
<div class="w3-container w3-blue"><h3>6</h3></div>
</div>
Try it Yourself »
Note
The w3-grid class creates the grid container.
CSS style properties define the columns, rows, gaps, and placement of the grid items.
Example
<div class="w3-grid" style="grid-template-columns:1fr 1fr 1fr">
<img src="/w3images/natureboy.jpg" style="width:100%">
<img src="/w3images/natureboy.jpg" style="width:100%">
<img src="/w3images/natureboy.jpg" style="width:100%">
<img src="/w3images/natureboy.jpg" style="width:100%">
<img src="/w3images/natureboy.jpg" style="width:100%">
<img src="/w3images/natureboy.jpg" style="width:100%">
</div>
Try it Yourself »
Grid Columns
The CSS grid-template-columns property defines the columns in a grid.
1
2
3
The following example creates three equal columns:
Example
<div class="w3-grid" style="grid-template-columns:1fr 1fr 1fr">
<div class="w3-container w3-blue"><h3>1</h3></div>
<div class="w3-container w3-light-blue"><h3>2</h3></div>
<div class="w3-container w3-blue"><h3>3</h3></div>
</div>
Try it Yourself »
The fr Unit
The fr unit represents a fraction of the available space.
Three 1fr columns have equal width:
Syntax
grid-template-columns: 1fr 1fr 1fr;
You can also make one column wider than another:
1fr
2fr
Example
<div class="w3-grid" style="grid-template-columns:1fr 2fr">
<div class="w3-container w3-blue"><p>1fr</p></div>
<div class="w3-container w3-light-blue"><p>2fr</p></div>
</div>
Try it Yourself »
Grid Template Columns Values
grid-template-columns values can be:
| Value | Explanation |
|---|---|
1fr | The column receives one share of the remaining space. Two columns defined as 1fr and 2fr receive one share and two shares. |
auto | The column width is determined automatically, based on its content and the available space. |
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 without overflowing, usually the width of its longest word. |
max-content | The column uses the width needed to display its content without wrapping at optional line breaks. |
minmax(150px, 1fr) | The column is at least 150 pixels wide and can grow to receive a share of the remaining space. |
fit-content(300px) | The column fits its content, normally limited to 300 pixels. Content that cannot shrink may make it wider. |
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, allowing occupied columns to expand. |
repeat(auto-fill, minmax(200px, 1fr)) | Creates as many columns as fit. Each column is at least 200 pixels wide. Empty columns remain in the layout. |
none | Defines no explicit columns. Columns are created automatically as needed. |
You can combine values, such as 150px 1fr 2fr, to create columns with different widths.
Examples
<div class="w3-grid" style="grid-template-columns:1fr 3fr">
<div class="w3-grid" style="grid-template-columns:auto auto auto">
<div class="w3-grid" style="grid-template-columns:150px auto">
<div class="w3-grid" style="grid-template-columns:25% auto">
<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">
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);
1
2
3
4
Example
<div class="w3-grid" style="grid-template-columns:repeat(4,1fr)">
<div class="w3-container w3-blue"><p>1</p></div>
<div class="w3-container w3-blue"><p>2</p></div>
<div class="w3-container w3-blue"><p>3</p></div>
<div class="w3-container w3-blue"><p>4</p></div>
</div>
Try it Yourself »
Grid Gaps
The CSS gap property adds space between grid items.
1
2
3
Example
<div class="w3-grid" style="grid-template-columns:repeat(3,1fr);gap:16px">
<div class="w3-container w3-blue"><h3>1</h3></div>
<div class="w3-container w3-blue"><h3>2</h3></div>
<div class="w3-container w3-blue"><h3>3</h3></div>
</div>
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%,200px),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
1 column
1 column
1 column
Example
<div class="w3-grid" style="grid-template-columns:repeat(3,1fr);gap:8px">
<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
<div class="w3-grid" style="grid-template-columns:150px 1fr;gap:16px">
The first column is 150px wide, and the second column (1fr) uses the remaining space.
Menu
Home
Products
Contact
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;gap:16px">
<div class="w3-container w3-light-grey">
Menu
</div>
<div class="w3-container">
Main Content
</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.
The grid-template-rows Property
The grid-template-rows property defines the heights of
the explicit grid rows.
Values can include px (pixels),
% (percentages), auto
and fr units.
Grid Areas
Named grid areas can be used for more advanced page layouts.
The first column is 150px wide, and the second column uses the remaining space:
Header
Main
This is the main content.
Example
<style>
.mygrid {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 150px 1fr;
gap: 10px;
}
.myheader {grid-area: header;}
.mynav {grid-area: nav;}
.mymain {grid-area: main;}
.myfooter {grid-area: footer;}
</style>
Try it Yourself »
"header header" means the first row has two columns, but header occupies both.
"nav main" means the second row has nav in the first column and main in the second.
"footer footer" means the third row has two columns, but footer occupies both.
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 |
|---|---|
| grid-template-columns | Defines grid columns |
| grid-template-rows | Defines grid rows |
| grid-template | Defines grid rows, columns, and areas |
| grid-template-areas | Defines named grid areas |
| grid-area | Defines a named grid area |
| gap | Defines gaps between rows and columns |
| row-gap | Defines gaps between rows |
| column-gap | Defines gaps between columns |
| grid-column | Defines where an item starts and ends horizontally |
| grid-row | Defines where an item starts and ends vertically |
| justify-content | Aligns the grid horizontally |
| align-content | Aligns the grid vertically |
| grid-auto-rows | Defines the size of automatically created rows |
| grid-auto-columns | Defines the size of automatically created columns |
For a complete description of CSS Grid properties, see the CSS Grid Tutorial.
