Motivation

Why do we need yet another way to position things?

An example web application

Table layout?

Grids can adapt to available space

How to use Grid layout

  #grid {
    display: grid;
    grid-template-columns: auto minmax(min-content, 1fr);
    grid-template-rows: auto minmax(min-content, 1fr) auto
  }

  #title    { grid-column: 1; grid-row: 1 }
  #score    { grid-column: 1; grid-row: 3 }
  #stats    { grid-column: 1; grid-row: 2; justify-self: start }
  #board    { grid-column: 2; grid-row: 1 / span 2; }
  #controls { grid-column: 2; grid-row: 3; align-self: center }

<div id="grid">
  <div id="title">Game Title</div>
  <div id="score">Score</div>
  <div id="stats">Stats</div>
  <div id="board">Board</div>
  <div id="controls">Controls</div>
</div>

Grids provide source independence

Portrait layout

  @media (orientation: portrait) {
    #grid {
      display: grid;
      grid-template-areas: "title stats"
                           "score stats"
                           "board board"
                           "ctrls ctrls";

      /* Columns and rows created with the template property can be 
       * assigned a sizing function with the grid-template-columns 
       * and grid-template-rows properties. */
      grid-template-columns: auto minmax(min-content, 1fr);
      grid-template-rows: auto auto minmax(min-content, 1fr) auto
    }
  }

Landscape layout

  @media (orientation: landscape) {
    #grid {
      display: grid;
      grid-template-areas: "title board"
                           "stats board"
                           "score ctrls";
      grid-template-columns: auto minmax(min-content, 1fr);
      grid-template-rows: auto minmax(min-content, 1fr) auto
    }
  }
  /* The grid-area property places a grid item into a named 
   * region (area) of the grid. */
  #title    { grid-area: title }
  #score    { grid-area: score }
  #stats    { grid-area: stats }
  #board    { grid-area: board }
  #controls { grid-area: ctrls }

Layering


Layout Concepts: Grid Lines


Layout Concepts: Terminology


  • Grid Line: horizontal and vertical dividing lines
  • Grid Track: generic term for row or column
  • Grid Cell: smallest area bounded by grid lines
  • Grid Area: logical space used to layout one or more grid items
  • Grid Item: formatting context for its contents - not block!

Example Grid Items

<div style="display:grid">
  <!-- grid item: block child -->
  <div id="item1">block</div>
  <!-- grid item: floated element; floating is ignored -->
  <div id="item2" style="float: left;">float</div>
  <!-- grid item: anonymous block box around inline content -->
  anonymous item 3
  <!-- grid item: inline child -->
  <span>
  item 4
  <!-- grid items do not split around blocks -->
  <div id=not-an-item>item 4</div>
  item 4
  </span>
</div>

The Explicit Grid


  • Defined by 3 properties - grid-template-rows, grid-template-columns and grid-template-areas
  • grid-template-rows is a space separated track list which includes line names and sizing functions of the grid rows
  • grid-template-columns specifies the column information as for the rows property
  • grid-template-areas specifies named areas which are not associated with any particular grid item. Also useful to visualize the grid

Example Explicit Grid

  #grid {
    display: grid;
    grid-template-columns: (first nav) 150px (main) 1fr (last);
    grid-template-rows: (first header) 50px (main) 1fr (footer) 50px (last);
  }

Example Explicit Grid using grid-template-areas

#grid {
    display: grid;
    grid-template-areas: "head head"
                         "nav  main"
                         "foot .   "
  }
  #grid > header { grid-area: head; }
  #grid > nav    { grid-area: nav; }
  #grid > main   { grid-area: main; }
  #grid > footer { grid-area: foot; }
  • This generates implicit named grid lines
  • Each named area creates 4 implicit grid lines (e.g. header creates a header-start and header-end for the column and row)

The Implicit Grid

#grid { 
  display: grid; 
  grid-template-columns: 20px; 
  grid-template-rows: 20px }
#A { grid-column: 1;          grid-row: 1; }
#B { grid-column: 5;          grid-row: 1 / span 2; }
#C { grid-column: 1 / span 2; grid-row: 2; }

Placing Grid Items


  • Can be explicitly defined or use an automatic placement algorithm
  • grid-auto-flow defines how grid items are placed if their position isn't explicit
  • The order property can override document order for positioning
  • grid-auto-position can be used to provide a default positioning
  • Explicit positioning is done via the grid-row-start, grid-column-start, grid-row-end and grid-column-end properties

Example Positioning

grid-column-start: 4; grid-column-end: auto;
/* Line 4 to line 5 */
grid-column-start: auto; grid-column-end: 6;
/* Line 5 to line 6 */
grid-column-start: 'C'; grid-column-end: 'C';
/* Line 3 to line 9 */
grid-column-start: 'C'; grid-column-end: span 'C';
/* Line 3 to line 6 */
grid-column-start: span 'C'; grid-column-end: 'C';
/* Line 6 to line 9 */
grid-column-start: span 'C'; grid-column-end: span 'C';
/* Error: both properties compute to auto */
grid-column-start: 5; grid-column-end: 'C';
/* Line 5 to line 9 */

Alignment and Z-order

  • Row alignment in grid areas is controlled by the justify-self and justify-items properties.
  • Column alignment in grid areas is controlled by the align-self and align-items properties.
  • Grid items use document order (or order overriden values) to paint
  • z-index can override the painting order just as in normal CSS

Example of paint ordering

#grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 
  }
#A { grid-column: 1 / span 2; grid-row: 2; align-self: foot }
#B { grid-column: 1; grid-row: 1; z-index: 10 }
#C { grid-column: 2; grid-row: 1; align-self: head; margin-left: -20px }
#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: head }
#E { grid-column: 1 / span 2; grid-row: 1 / span 2; z-index: 5; justify-self: center; align-self: center; }

Try it now!

  • Available in IE10+
  • In Chrome behind a flag

Thank You!