W3.CSS Grid
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.
The w3-grid Class
The w3-grid class creates a grid container.
The direct children of a grid container 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.
The CSS style grid-template-columns:1fr 1fr 1fr defines 3
(one frame) grid items.
Example
<div class="w3-grid" style="grid-template-columns:1fr 1fr 1fr">
<img src="img_natureboy.jpg" style="width:100%">
<img src="img_girl_mountain.jpg" style="width:100%">
<img src="img_girl.jpg" style="width:100%">
<img src="img_boy.jpg" style="width:100%">
<img src="img_man_bench.jpg" style="width:100%">
<img src="img_girl_train.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;
1fr
1fr
1fr
grid-template-columns: 1fr 2fr;
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 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
<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 | Try it |
|---|---|---|
| align-content:center | Aligns the grid vertically | Try it |
| align-content:end | Aligns the grid vertically | Try it |
| align-content:space-around | Aligns the grid vertically | Try it |
| align-content:space-between | Aligns the grid vertically | Try it |
| align-content:space-evenly | Aligns the grid vertically | Try it |
| align-content:start | Aligns the grid vertically | 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-start | Defines where an item starts and ends vertically | 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 grid columns | Try it |
| grid-template-columns:autofit | Defines automatic grid columns width | Try it |
| grid-template-columns:fractions | Defines grid columns width | Try it |
| grid-template-columns:percent | Defines grid columns width | Try it |
| grid-template-columns:pixels | Defines 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 |
