fbpx

This article is in-progress. We’re trying to stay on-top of grid layout and make sure we have some information about it. But know that grid is extremely new, not well supported, and in-flux in browserland still.

The grid property in CSS is the foundation of Grid Layout. It aims at fixing issues with older layout techniques like float and inline-block, which both have issues and weren’t really designed for page layout.

You start by establishing a grid context on an element:

.area {
  display: -ms-grid; /* prefix for IE 10 */
  display: grid; /* or inline-grid */
}

Then you define what that grid layout will be like. Think columns and rows like a spreadsheet (or table). Then, you can define for each child a column and a row (resulting in a cell). No markup changing is involved; everything is done through CSS.

Along with the fact this method fixes the issues we encounter with older layout techniques, its main benefit is you can display a page in a way which can differ from the flow order.

Properties

The `fr` Unit

The fr unit can be used for grid-rows and grid-columns values. It stands for“fraction of available space”. Think of it as percentages for available space when you’ve taken off fixed-sized and content-based columns/rows. As the spec says:

The distribution of fractional space occurs after all ‘length’ or content-based row and column sizes have reached their maximum.

Coming Soon

The properties listed so far are the very basics to use the grid layout; they are also the first (and currently only) properties to be supported in this module.

According to the official specifications, there are a lot more involved including:

  • grid-template: allows grid definition through a template of identifiers
  • grid-column-position: current grid-column since grid-column is supposed to be a shorthand for grid-column-position and grid-column-span
  • grid-row-position: same as above
  • grid-position: shorthand for grid-column-position and grid-row-position
  • grid-span: shorthand for grid-column-span and grid-row-span
  • grid-area: shorthand for grid-column-position, grid-row-position,grid-column-span and grid-row-span
  • grid-auto-columns: change default size for columns
  • grid-auto-rows: change default size for rows
  • grid-auto-flow: allows grid-items to automatically flow in available cells

Unfortunately, these properties are currently unsupported. I’m going to¬†update this article over time to document and include examples.