Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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

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

Document Tags and Contributors

Tags: 
 Contributors to this page: bunnybooboo, kwhinnery, rolfedh, PushpitaPikuDey, yisibl
 Last updated by: bunnybooboo,