Making responsive grids

A step-by-step guide to making a responsive grid and the different pieces of code that are needed.

Goal

We’re going to explore the HTML and CSS necessary to make a very basic responsive grid.

This is what it should look like when it’s done:

  1. Type it, type it real good

    Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the making-responsive-grids repository.

Fork & clone the “making-responsive-grids” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

  1. Fork, clone & Markbot

    This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

1 Set up the project

Before we get started, create some files and get ready.

  1. making-responsive-grids
  2. index.html
  3. css
  4. grid.css
  5. main.css
  6. images
  7. armillaria-solidipes.jpg
  8. bioluminescent-mushroom.jpg
  9. bracket-fungi.jpg
  1. Make an index.html
  2. Make a grid.css in your css folder
  3. Make a main.css in your css folder

  1. Naming conventions

    Don’t forget to follow the naming conventions.

2 Add HTML boilerplate

Use the html5, viewport, and css snippets.

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Responsive grid</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/grid.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

</body>
</html>

  1. HTML snippets

    Create the boilerplate with html5, viewport & css

  2. Important

    The order of these files is extremely important: grid.css should always come before main.css in the HTML.

  3. Lines G–H

    We’ll be using two different CSS files now: one for the grid and one for our other CSS.

    This helps us keep our CSS organized and separated. Instead of one massively long CSS file, we can separate them into different, singularly purposed files.

3 Add CSS boilerplate

Use the cssviewport, borderbox & textsize snippets.

@-moz-viewport { width: device-width; scale: 1; }
@-ms-viewport { width: device-width; scale: 1; }
@-o-viewport { width: device-width; scale: 1; }
@-webkit-viewport { width: device-width; scale: 1; }
@viewport { width: device-width; scale: 1; }

html {
  box-sizing: border-box;

  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

.img-flex {
  display: block;
  width: 100%;
}

  1. CSS snippets

    Create the boilerplate with cssviewport, borderbox & textsize

  2. Lines X–AA

    Make sure to add the class for scalable images.

4 Add content to the HTML

Let’s add all the content we need to the HTML including the basic tags.

You don’t have to type out all this text, copy-and-paste it from content.txt

⋮
<body>

  <div>
    <div>
      <img class="img-flex" src="images/bioluminescent-mushroom.jpg" alt="">
      <h1>Fungi</h1>
      <p>These organisms are classified as a kingdom, Fungi, which is separate from the other eukaryotic life kingdoms of plants and animals.</p>
      <p>A fungus is any member of the group of eukaryotic organisms that includes unicellular microorganisms such as yeasts and molds, as well as multicellular fungi that produce familiar fruiting forms known as mushrooms.</p>
    </div>
    <div>
      <img class="img-flex" src="images/armillaria-solidipes.jpg" alt="">
      <h2>Armillaria solidipes</h2>
      <p>Armillaria solidipes is known to be one of the largest living organisms, where scientists have estimated a single specimen found in Malheur National Forest in Oregon to have been growing for some 2,400 years, covering 8.4 km² and colloquially named the “Humongous Fungus”.</p>
    </div>
    <div>
      <img class="img-flex" src="images/bracket-fungi.jpg" alt="">
      <h2>Polypores</h2>
      <p>Most polypores inhabit tree trunks or branches consuming the wood, but some soil-inhabiting species form mycorrhiza with trees. Polypores are the most important agents of wood decay—playing a very significant role in nutrient cycling and carbon dioxide production of forest ecosystems.</p>
    </div>
  </div>

</body>
</html>

  1. Line F

    Don’t forget to add the .img-flex class to all the images.

5 The grid and unit classes

Before we add any CSS we need to add the basic .grid and .unit classes to the code.

⋮
<body>

  <div class="grid">
    <div class="unit">
      <img class="img-flex" src="images/bioluminescent-mushroom.jpg" alt="">
      <h1>Fungi</h1>
      <p>These organisms are classified as a kingdom, Fungi, which is separate from the other eukaryotic life kingdoms of plants and animals.</p>
      <p>A fungus is any member of the group of eukaryotic organisms that includes unicellular microorganisms such as yeasts and molds, as well as multicellular fungi that produce familiar fruiting forms known as mushrooms.</p>
    </div>
    <div class="unit">
      <img class="img-flex" src="images/armillaria-solidipes.jpg" alt="">
      <h2>Armillaria solidipes</h2>
      <p>Armillaria solidipes is known to be one of the largest living organisms, where scientists have estimated a single specimen found in Malheur National Forest in Oregon to have been growing for some 2,400 years, covering 8.4 km² and colloquially named the “Humongous Fungus”.</p>
    </div>
    <div class="unit">
      <img class="img-flex" src="images/bracket-fungi.jpg" alt="">
      <h2>Polypores</h2>
      <p>Most polypores inhabit tree trunks or branches consuming the wood, but some soil-inhabiting species form mycorrhiza with trees. Polypores are the most important agents of wood decay—playing a very significant role in nutrient cycling and carbon dioxide production of forest ecosystems.</p>
    </div>
  </div>

</body>
</html>

  1. Line D

    Add the .grid class to the surrounding <div> so that all the content is inside the grid.

  2. Line E

    Add the .unit class to the inner <div> tags to denote that this is a moving, responsive piece of content.

6 Basic grid CSS

Inside the grid.css file we add the CSS for the grid specifically—nothing else.

In this example we’re going to write our own flexbox-based grid, like Gridifier, much much simpler.

.grid {
  display: flex;
  flex-wrap: wrap;
}

  1. Line B

    Turn the .grid into a flex container, so that all it’s immediate children arrange in a row.

  2. Line C

    We’ll also allow the flex items to wrap to allow us to make responsive layouts a little more easily.

7 Size classes for extra small screens

Now that we have the basics done we need to add more classes to each of the .unit tags for different sizes.

We’ll start with the extra small size, so the class will start with xs-. Then every unit should take up the full width, so in fractions that’s just 1. So our final class is going to be xs-1.

⋮
<body>

  <div class="grid">
    <div class="unit xs-1">
      <img class="img-flex" src="images/bioluminescent-mushroom.jpg" alt="">
      <h1>Fungi</h1>
      <p>These organisms are classified as a kingdom, Fungi, which is separate from the other eukaryotic life kingdoms of plants and animals.</p>
      <p>A fungus is any member of the group of eukaryotic organisms that includes unicellular microorganisms such as yeasts and molds, as well as multicellular fungi that produce familiar fruiting forms known as mushrooms.</p>
    </div>
    <div class="unit xs-1">
      <img class="img-flex" src="images/armillaria-solidipes.jpg" alt="">
      <h2>Armillaria solidipes</h2>
      <p>Armillaria solidipes is known to be one of the largest living organisms, where scientists have estimated a single specimen found in Malheur National Forest in Oregon to have been growing for some 2,400 years, covering 8.4 km² and colloquially named the “Humongous Fungus”.</p>
    </div>
    <div class="unit xs-1">
      <img class="img-flex" src="images/bracket-fungi.jpg" alt="">
      <h2>Polypores</h2>
      <p>Most polypores inhabit tree trunks or branches consuming the wood, but some soil-inhabiting species form mycorrhiza with trees. Polypores are the most important agents of wood decay—playing a very significant role in nutrient cycling and carbon dioxide production of forest ecosystems.</p>
    </div>
  </div>

</body>
</html>

  1. Line E

    Add a second class to unit, the .xs-1 class. Each class is separated by a space.

    So, the .unit now has these two classes:

    • .unit
    • .xs-1

8 Add the CSS for the extra small size

Now that we have the names of the classes we can target the extra small size in our grid.css file.

This class should be above all media queries because it is the smallest size we’re designing for.

⋮
.grid {
  display: flex;
  flex-wrap: wrap;
}

.xs-1 {
  width: 100%;
}

Now we should see something that looks like this (which isn’t too terribly different from where we started.)

  1. Lines G–I

    Because the fraction is 1 the width will then be 100%

9 Size classes for small screens

Next up we’ll move to another screen size: small screens, using classes that start with s-

The small screen layout is essentially the same: each .unit taking up the whole width.

The great thing about having all these different classes is that now we can look at our HTML and know exactly what each element is doing on each different screen size.

⋮
<body>

  <div class="grid">
    <div class="unit xs-1 s-1">
      <img class="img-flex" src="images/bioluminescent-mushroom.jpg" alt="">
      <h1>Fungi</h1>
      <p>These organisms are classified as a kingdom, Fungi, which is separate from the other eukaryotic life kingdoms of plants and animals.</p>
      <p>A fungus is any member of the group of eukaryotic organisms that includes unicellular microorganisms such as yeasts and molds, as well as multicellular fungi that produce familiar fruiting forms known as mushrooms.</p>
    </div>
    <div class="unit xs-1 s-1">
      <img class="img-flex" src="images/armillaria-solidipes.jpg" alt="">
      <h2>Armillaria solidipes</h2>
      <p>Armillaria solidipes is known to be one of the largest living organisms, where scientists have estimated a single specimen found in Malheur National Forest in Oregon to have been growing for some 2,400 years, covering 8.4 km² and colloquially named the “Humongous Fungus”.</p>
    </div>
    <div class="unit xs-1 s-1">
      <img class="img-flex" src="images/bracket-fungi.jpg" alt="">
      <h2>Polypores</h2>
      <p>Most polypores inhabit tree trunks or branches consuming the wood, but some soil-inhabiting species form mycorrhiza with trees. Polypores are the most important agents of wood decay—playing a very significant role in nutrient cycling and carbon dioxide production of forest ecosystems.</p>
    </div>
  </div>

</body>
</html>

  1. Line E

    Add a third class to unit, the .s-1 class. So, the .unit now has these three classes:

    • .unit
    • .xs-1
    • .s-1

10 Add the CSS for the small size

The CSS is very similar to the extra small screen version, except in this instance it’s inside a media query—the 25em media query.

⋮
.xs-1 {
  width: 100%;
}

@media only screen and (min-width: 25em) {

  .s-1 {
    width: 100%;
  }

}

11 Size classes for medium screens

Now we’ll move upwards to the next biggest screen size: medium, denoted with .m- classes.

⋮
<body>

  <div class="grid">
    <div class="unit xs-1 s-1 m-1">
      <img class="img-flex" src="images/bioluminescent-mushroom.jpg" alt="">
      <h1>Fungi</h1>
      <p>These organisms are classified as a kingdom, Fungi, which is separate from the other eukaryotic life kingdoms of plants and animals.</p>
      <p>A fungus is any member of the group of eukaryotic organisms that includes unicellular microorganisms such as yeasts and molds, as well as multicellular fungi that produce familiar fruiting forms known as mushrooms.</p>
    </div>
    <div class="unit xs-1 s-1 m-1-2">
      <img class="img-flex" src="images/armillaria-solidipes.jpg" alt="">
      <h2>Armillaria solidipes</h2>
      <p>Armillaria solidipes is known to be one of the largest living organisms, where scientists have estimated a single specimen found in Malheur National Forest in Oregon to have been growing for some 2,400 years, covering 8.4 km² and colloquially named the “Humongous Fungus”.</p>
    </div>
    <div class="unit xs-1 s-1 m-1-2">
      <img class="img-flex" src="images/bracket-fungi.jpg" alt="">
      <h2>Polypores</h2>
      <p>Most polypores inhabit tree trunks or branches consuming the wood, but some soil-inhabiting species form mycorrhiza with trees. Polypores are the most important agents of wood decay—playing a very significant role in nutrient cycling and carbon dioxide production of forest ecosystems.</p>
    </div>
  </div>

</body>
</html>

We’re mixing the layout up a little bit at medium sizes:

  1. The first .unit is still taking the full width, with a class of .m-1
  2. The second and third units are now taking up ½ of the space, with the .m-1-2 class.

  1. Line E

    Add a fourth class to unit, the .m- classes. So, the .unit now has these four classes:

    • .unit
    • .xs-1
    • .s-1
    • .m-1 or .m-1-2

12 Add the CSS for the medium size

Since we’re working in a larger screen size, that means a new media query: 38em.

⋮
@media only screen and (min-width: 25em) {

  .s-1 {
    width: 100%;
  }

}

@media only screen and (min-width: 38em) {

  .m-1 {
    width: 100%;
  }

  .m-1-2 {
    width: 50%;
  }

}

Adjusting your screen width, we should see this as the layout:

If you resize the screen bigger and smaller it should switch between the two different layouts we have now.

  1. Lines P–R

    We now have a second size class for this media query: ½, denoted by the .m-1-2 class, with a width of 50%

13 Finally: the large screens

This one is up to you! The goal is to make the large screen into 3 columns, like this:

Steps to complete:

  1. Add classes to each .unit representing their sizes on large screens
  2. In grid.css, add a new media query for 60em
  3. Add the necessary classes inside that media query to give the units the correct sizes

I didn’t want to have to go through the process of creating a grid every time, so I made myself a tool to generate grids: Gridifier. This is what we’ll look at in the next lesson.

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

  1. Submit

    Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.