Grid: Alignment, Centering, & Reordering Content

Topics covered in this Web Development tutorial:

Aligning Grid Items, Aligning Within the Grid Container, Aligning Individual Grid Items, Ordering Grid Items

Exercise Preview

Exercise Overview

In this exercise you’ll learn about aligning grid items and ordering content (which are both similar to flexbox).

Getting Started

1. In your code editor, close any files you may have open.
2. For this exercise we’ll be working with the Grid Alignment and Order folder located in Desktop > Class Files > yourname-Flexbox Grid Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).

3. Open index.html from the Grid Alignment and Order folder.

   • Notice we have a .gallery div that contains images.
   • Notice the first image is wrapped in .logo-wrapper div. In the css file we’ve styled this div with a background color so you’ll be able to see some things about sizing easier than if all these items were only images.

4. Preview index.html in Firefox.

   • The .gallery div has an orange border (so you can more easily see its size).
   • The J.Crew logo is in a div with a background color, so it’s currently filling up the entire width of the gallery.
   • The remaining logos are displayed inline like images normally are.

5. Leave index.html open in Firefox as you work, so you can reload the page to see the code changes you’ll make.

Starting the Grid

1. Switch back to your code editor.
2. Open main.css from the css folder (in the Grid Alignment and Order folder).

3. In the .gallery rule add the following bold code:

   gallery {
      border: 8px solid orange;
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(4, 1fr);
   }
   

4. Save the file, and reload the page in Firefox.

   • The logos should now be in a 4 by 4 grid.
   • The logos would look better aligned to the center (horizontally and vertically).
5. Ctrl–click (Mac) or Right–click (Windows) anywhere in the grid and choose Inspect Element.
6. In the DevTools, to the right of <div class="gallery"> click the grid button to show the grid overlay.
7. Notice the colored div that contains the J.Crew logo fills its grid area.

8. Leave the DevTools open with the grid overlay on.

Aligning Grid Items

1. Switch back to your code editor.

2. In the .gallery rule add the following bold code:

   gallery {

   Code Omitted To Save Space

      grid-template-columns: repeat(4, 1fr);
      justify-items: center;
   }
   

3. Save the file, and reload the page in Firefox.

   • Notice the logos are now horizontally centered within their grid areas.
   • Notice the colored div that contains the J.Crew logo has collapsed to be the size of its content (it previously had stretched to fill the grid area).
4. Switch back to your code editor.

5. In the .gallery rule add the following bold code:

   gallery {

   Code Omitted To Save Space

      justify-items: center;
      align-items: center;
   }
   

6. Save the file, and reload the page in Firefox.

   • Notice the logos are also vertically centered within their grid areas.

Aligning Within the Grid Container

1. Switch back to your code editor.

2. In the .gallery rule change 1fr to 175px as shown below in bold:

   gallery {
      border: 8px solid orange;
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(4, 175px);
      justify-items: center;
      align-items: center;
   }
   

3. Save the file, and reload the page in Firefox.

   • Resize the window so it’s wide enough that when the logos do not fill the gallery div, you can see there’s now empty white space to the right of the logos (inside the orange border).
4. Switch back to your code editor.

5. In the .gallery rule add the following bold code:

   gallery {

   Code Omitted To Save Space

      justify-items: center;
      align-items: center;
      justify-content: center;
   }
   

6. Save the file, and reload the page in Firefox.

   • Notice the entire section of grid columns is now centered (so the empty space is evenly split between the left and right sides).

7. In DevTools find the .gallery rule’s justify-content property.

   • Try out the following values: start, end, center, space-around, space-between, and space-evenly (stretch is the default).
8. Switch back to your code editor.

9. In the .gallery rule add the following bold code:

   gallery {

   Code Omitted To Save Space

      justify-content: center;
      height: 700px;
   }
   

10. Save the file, and reload the page in Firefox.

    • The grid is now taller.
    • We needed to set a height to see how align-content works.
11. Switch back to your code editor.

12. In the .gallery rule add the following bold code:

    gallery {

    Code Omitted To Save Space

       justify-items: center;
       align-items: center;
       justify-content: center;
       align-content: center;
       height: 700px;
    }
    

13. Save the file, and reload the page in Firefox.

    • Notice the entire section of grid rows is now vertically centered (so the empty space is evenly split between the top and bottom).

14. In DevTools find the .gallery rule’s align-content property.

    • Try out the following values: start, end, center, space-around, space-between, and space-evenly (stretch is the default).
    • These work the same as justify-content, but vertically instead of horizontally.

15. Reload the page to get rid of any changes you were experimenting with.

Aligning Individual Grid Items

In this layout we don’t need to align individual elements, but let’s take a look at how that works for when you will need it.

1. Switch back to your code editor.

2. Below the .gallery rule add the following new rule:

   .gallery .zara {
      justify-self: end;
      align-self: start;
   }
   

3. Save the file, and reload the page in Firefox.

   • Notice the Zara logo is now at the top right of its grid area.
   • Ctrl–click (Mac) or Right–click (Windows) on the Zara logo and choose Inspect Element.
   • In DevTools find the .gallery .zara rule and experiment with changing justify-self and align-self to any of the following values: start, end, and center (stretch is the default, which is appropriate for divs, but not images).
4. Switch back to your code editor.

5. Delete the .gallery .zara rule (we were only seeing how this works, and didn’t actually want to change it).

Ordering Grid Items

Ordering works the same in grid and flexbox.

1. Below the .gallery rule add the following new rule:

   .gallery .nike {
      order: -1;
   }
   

2. Save the file, and reload the page in Firefox.

   • The Nike logo should now be first (because the default order is 0).
3. Switch back to your code editor.

4. In the .gallery .nike rule change the order as shown below:

   .gallery .nike {
      order: 1;
   }
   

5. Save the file, and reload the page in Firefox.

   • The Nike logo should now be last.
6. Switch back to your code editor.
7. Switch to index.html.
8. Delete the .logo-wrapper div that wraps the first image (be sure to delete the div’s start and end tags).
9. Save the file.
10. Switch back to main.css.

11. Above the .gallery .nike rule add the following new rule:

    .gallery img {
       order: 3;
    }
    

12. Below the .gallery .nike rule add the following new rule:

    .gallery .hermes {
       order: 2;
    }
    

13. Save the file, and reload the page in Firefox.

    • The Nike logo should be first, followed by Hermes, J.Crew, and then the rest of the logos.

Optional Bonus: Cleaning Up the Appearance

1. Switch back to your code editor.
2. Remove the height from the .gallery rule.
3. Remove the border from the .gallery rule.

4. Save the file, and reload the page in Firefox.

   • In the DevTools, to the right of <div class="gallery"> click the grid button to hide the grid overlay.
   • That’s a clean looking grid of logos!