Grid systems · Web Dev 2 · Learn the Web

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;
  flex-wrap: wrap;
}
.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 -->

Inside a .grid but not inside a .unit

<div class="grid">
  <!-- This is bad! -->
  <h1>Me be smushed!</h1>
</div>

Why?

Two keywords

All the maths!

Classes for size

Different classes per media query

Gridifier

Videos & tutorials