On the Grid

CSS
IS
AWESOME

<table>

<img src="spacer.gif" width="50" height="30">

<table>

we float along

Paving the Cowpaths

$ → document.querySelector

flexbox!
only 1-dimensional constraints

CSS Grid Layout

based on old MS proposal

2-dimensional art direction for the web!

implicit and explicit forms
explicit - place specific elements in specific places
high degree of control
primary outer site layout, app interface
implicit - placement based on sequence of content
high degree of flexibility
"table view", grids, lists
defining the grid
display: none
display: block
display: inline
display: flex
display: grid
a
b
c
d
a
b
c

Phenomenal Cosmic Power

grid-auto-flow

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

minmax()

min-width: 100px;
max-width: 20%;
grid-template-rows: ?
grid-template-rows: minmax(100px, 20%) minmax(200px, 1fr); 
border-top-width: 4px;
border-left-color: cyan;

border: 4px solid cyan

<div class="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</div>
Header
Main area
+--------------+
|     head     |
+--------------+
| nav |  main  |
|     |        |
|     +--------+
|     |  foot  |
+-----+--------+
+--------------+
|     head     | auto
+--------------+
| nav |  main  | 1fr
|     |        |
|     +--------+
|     |  foot  | auto
+-----+--------+
 200px   1fr
head   head  auto
nav    main  1fr
nav    foot  auto
200px  1fr
 "head   head" auto
 "nav    main" 1fr
 "nav    foot" auto
/ 200px  1fr
Header
Main area

demos

fallback-friendly


/* Completely Reasonable layout for older browsers */
article { ... }

@supports (display: grid) {
  /* Cutting-edge layout for hip browsers */
}

Art Direction in the Second Dimension!

Thanks!

Me on Twitter Rachel Andrew's "Grid By Example" Jen Simmons's Layout Lab