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 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-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>
Note
The w3-grid class creates the grid container.
Style properties defines the columns, rows, gaps, and placement of the grid items.
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-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>
The fr Unit
The fr unit represents a fraction of the available space.
Three 1fr columns have equal width:
You can also make one column wider than another:
1fr
2fr
Example
<div class="w3-container w3-blue><p>1fr</p></div>
<div class="w3-container w3-light-blue><p>2fr</p></div>
</div>
The repeat() Function
The CSS repeat() function makes repeated columns easier to write.
Instead of:
You can write:
1
2
3
4
Example
<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>
Grid Gaps
The CSS gap property adds space between grid items.
1
2
3
Example
<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>
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, when each column is at least 200 pixels wide:
London
England
Paris
France
Rome
Italy
Example
<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>
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 style="grid-column:span 2">Spans 2 columns</div>
<div>1 column</div>
<div>1 column</div>
<div>1 column</div>
</div>
Build a Page Layout
Grid is useful for creating complete page layouts.
Example
The first column is 150px, the second (1fr) is the rest fraction.
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-container w3-light-grey">
Menu
</div>
<div class="w3-container">
Main Content
</div>
</div>
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.
You will learn about w3-flex in the next chapter.
What You Have Learned
w3-gridcreates a CSS Grid container- The children of a grid container become grid items
grid-template-columnsdefines the columns- The
frunit divides available space repeat()simplifies repeated columnsgapadds space between grid itemsauto-fitandminmax()can create responsive grids- Grid items can span multiple columns
More Examples
Explore more CSS Grid features with W3.CSS.
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), repeat() or any combination.
Examples
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).
Grid Areas
Named grid areas can be used for more advanced page layouts.
"header header" means the first row has two columns, but header occupies both.
"nav main" means row 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 |
| 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.