CSS Grid Layout

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

HTML
<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

CSS
<code id="actual-css-code" class="cm-s-default">.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%; 
}</code>

Reference

CSS Properties

CSS Function

Specifications

Specification Status Comment
CSS Grid Layout Working Draft Initial definition.

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/css_grid_layout

CSS Reference