An introduction to using grid systems on websites and a look at Gridifier, a tool to help generate custom grid systems.

Go fullscreen: ⌃⌥F

Grid systems

Why?

  • More flexible layouts—less work
  • Reduce code duplication
  • Be more declarative & clear
  • Easier working on teams

Two keywords

  • grid — a row of layout, representing the whole width
  • unit — a division of that row

All the maths!

Spaces defined in fractions of the available width.

Classes for size

  • Different sizes are defined by different classes
  • 1 class to define a unit & 1 class to define its size
.u-1-3   /* 1/3 width */
.u-2-3   /* 2/3 width */
.u-3-6   /* Doesn’t exist — use 1/2 */
HTML
<div class="grid">
  <div class="unit u-1-3">Unit 1/3</div>
  <div class="unit u-2-3">Unit 2/3</div>
</div>
CSS
.grid {
  display: flex;
}
.u-1-3 {
  width: 33.3333%;
}
.u-2-3 {
  width: 66.6666%;
}

Different classes per media query

  • Add a separate class for each media query
  • Declarative — can immediately see what it’s doing
<div class="grid">
  <div class="unit xs-1 s-1-2 m-1-3"></div>
</div>
HTML
<div class="grid">
  <div class="unit xs-1 m-1-2">Unit A</div>
  <div class="unit xs-1 m-1-2">Unit B</div>
</div>
CSS
.xs-1 {
  width: 100%;
}

@media only screen and (min-width: 38em) {
  .m-1-2 {
    width: 50%;
  }
}

Gridifier

I don’t want to have to write this code every time!

  • Generate a whole grid system
  • Media query size configuration
  • Max number of column configuration
  • And lots more features…

Gridifier »

HTML
<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Using Gridifier</title>
  <link href="css/grid.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

  <div class="grid">
    <div class="unit xs-1 m-1-2">Unit A</div>
    <div class="unit xs-1 m-1-2">Unit B</div>
  </div>

</body>
</html>
HTML
<div class="grid grid-middle">…</div>      <!-- Align the units to their middles -->

<div class="grid grid-bottom">…</div>      <!-- Align the units to their bottoms -->

<div class="unit unit-xs-hidden">…</div>   <!-- Hide this unit from view on specific sizes -->

Smushy text

  • Inside a .grid but not inside a .unit
<div class="grid">
  <!-- This is bad! -->
  <h1>Me be smushed!</h1>
</div>
Start

An introduction to using grid systems on websites and a look at Gridifier, a tool to help generate custom grid systems.