CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.
Basic example
The example below shows a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto. Items have been placed onto the grid using line-based placement.
* {box-sizing: border-box;}
.wrapper {
max-width: 940px;
margin: 0 auto;
}
.wrapper > div {
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 1em;
color: #d9480f;
}
HTML
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
Reference
CSS properties
CSS functions
CSS data types
Glossary entries
Guides
- Basic concepts of Grid Layout
- Relationship of Grid Layout to other layout methods
- Layout using line-based placement
- Grid template areas
- Layout using named grid lines
- Auto-placement in CSS Grid Layout
- Box alignment in CSS Grid Layout
- CSS Grid, Logical Values and Writing Modes
- CSS Grid Layout and accessibility
- CSS Grid and progressive enhancement
- Realising common layouts using CSS Grid
- Subgrid
- Masonry Layout
External resources
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout Module Level 3 | Editor's Draft | Adds masonry. |
CSS Grid Layout Module Level 2 | Working Draft | Added subgrids. |
CSS Grid Layout | Candidate Recommendation | Initial definition. |
- CSS
- CSS Reference
- CSS Grid Layout
-
Guides
- Basic concepts of grid layout
- Relationship to other layout methods
- Line-based placement
- Grid template areas
- Layout using named grid lines
- Auto-placement in grid layout
- Box alignment in grid layout
- Grids, logical values and writing modes
- CSS Grid Layout and Accessibility
- CSS Grid Layout and Progressive Enhancement
- Realizing common layouts using grids
- Subgrid
- Masonry layout
-
Properties