CSS Grid is still an experimental technology - most browsers require a flag to be enabled to make use of this API. Make sure to reference the compatibility table for each property and function for more information.
CSS Grid layout contains design features targeted at web application developers. The CSS grid can be used to achieve many different layouts. It 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, unlike tables, grid layout doesn’t have content structure, therefore enabling a wide variety of layouts not possible in 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
HTML Content
<div class="wrapper"> <div class="box a">a</div> <div class="box b">b</div> <div class="box c">c</div> <div class="box d">d</div> <div class="box e">e</div> <div class="box f">f</div> </div>
CSS Content
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
Reference
CSS Properties
CSS Function
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout | Working Draft | Initial definition. |