Grid: Sizing & Placing Items Within the Grid

Topics covered in this Web Development tutorial:

Spanning Columns & Rows, Placing & Sizing Using Numbered Grid Lines, Naming Grid Lines

Exercise Preview

Exercise Overview

In this exercise you’ll learn about placing elements within the grid and sizing them.

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 Sizing and Placing 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 Sizing and Placing folder.

   • Notice a .container div wraps 4 elements: header, nav, main, and footer.

4. Preview index.html in Firefox.

   • Notice the .container div has an orange border (so you can more easily see its size) and we’ve given different background colors to the elements inside.
   • Notice the header, nav, main, and footer currently take up the entire width of their parent container div.

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 Sizing and Placing folder).

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

   .container {
      display: grid;
      grid-template-columns: 1fr 2fr;
      grid-template-rows: 90px 90px 90px;
      gap: 2px;
      border: 8px solid orange;
   }
   

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

   • You should have 2 columns (the right column is wider than the left).
   • You should have 3 rows, with the last row being empty (we’ll fill it in a moment).

Spanning Columns

1. Switch back to your code editor.

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

   header {
      grid-column: span 2;
      background: #0db8e8;
   }
   

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

   • The header should now span both columns.
   • Notice the footer has been pushed down into the third row, which had been empty.
4. Switch back to your code editor.

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

   footer {
      grid-column: span 2;
      background: #9700da;
   }
   

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

   • The footer should now span both columns.
7. Ctrl–click (Mac) or Right–click (Windows) anywhere in the grid and choose Inspect Element.
8. In the DevTools, to the right of <div class="container"> click the grid button to show a grid overlay.
9. Leave the DevTools open with the grid overlay on.
10. Switch back to your code editor.

11. In the header rule add the following bold code:

    header {
       grid-column: span 4;
       background: #0db8e8;
    }
    

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

    • Even though we didn’t explicitly define 4 columns, because we said to span 4 columns it had to add 2 more columns (as you can see in the overlay).
13. Switch back to your code editor.

14. Undo the change to go back to a span of 2:

    header {
       grid-column: span 2;
       background: #0db8e8;
    }
    

Spanning Rows

1. In the nav rule add the following bold code:

   nav {
      grid-row: span 2;
      background: #0978e2;
   }
   

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

   • Now that the nav is spanning 2 rows, the footer can’t fit beside it. Therefore a new 4th row was created. It an implicit row so it doesn’t get the same height we explicitly set for our 3 rows.
   • You do not have to fill all grid spaces! Later we’ll tuck the Footer into the empty space below Main, but it’s OK to leave them empty if you want.

3. In the Grid area of the Firefox DevTools, under Grid Display Settings check on Display line numbers.

   • Notice that each line has a number.
   • Notice how the lines are counted with positive numbers from left to right (and top to bottom).
   • Notice how the lines are counted with negative numbers in the opposite direction: from right to left (and bottom to top).

Placing & Sizing Using Numbered Grid Lines

1. Switch back to your code editor.

2. In the header rule, replace grid-column with the following bold code:

   header {
      grid-column-start: 1;
      grid-column-end: 2;
      background: #0db8e8;
   }
   

   NOTE: These numbers refer to the column line numbers (not column numbers like you might guess). So 1 is the first line, and 2 is the second line.

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

   • The header should now take occupy only one column, because it starts at line 1 (the leftmost line) and end at line 2.
4. Switch back to your code editor.

5. In the header rule, change the start and end values as shown below:

   header {
      grid-column-start: 2;
      grid-column-end: 3;
      background: #0db8e8;
   }
   

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

   • The header should now be in the right column (because it starts at line 2 and ends on line 3).
7. Switch back to your code editor.

8. In the header rule, change the start and end values as shown below:

   header {
      grid-column-start: 1;
      grid-column-end: -1;
      background: #0db8e8;
   }
   

   NOTE: Grid lines are counted as negative numbers from right to left, so -1 is the rightmost line.

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

   • The header should now span the entire width of the grid (both columns).
10. Switch back to your code editor.

11. In the header rule, combine the two properties into a single shorthand grid-column property as shown below in bold:

    header {
       grid-column: 1 / -1;
       background: #0db8e8;
    }
    

    NOTE: The syntax is grid-column: start / end;
    You can also use values such as:
    • grid-column: span 2 / 5; (span 2 ending at 5)
    • grid-column: 2 / span 3; (start at 2 and span 3)

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

    • The header should look the same, this was just a more efficient way to code.
13. Switch back to your code editor.

14. In the nav rule, update the grid-row value as follows:

    nav {
       grid-row: 2 / -1;
       background: #0978e2;
    }
    

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

    • With the -1 ending line number, you may have expected the nav to end at the bottom of the grid, but it does not. Why?
    • -1 is the bottom-most explicit row line. We’ve only explicitly set 3 rows. When there are not enough explicit rows for all the content, the other elements will end up below the -1 line. They are put into the implicit rows, which end up below the -1 line.
    • Next we’ll move the footer into the empty grid space, so this will work in a moment.
16. Switch back to your code editor.

17. In the footer rule change grid-column so it fits into the empty space:

    footer {
       grid-column: 2 / -1;
       background: #9700da;
    }
    

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

    • The footer should now fill the empty space that was below main, so we are back to our 3 explicit rows.
19. Switch back to your code editor.

20. In the .container rule add the following bold code:

    .container {
       display: grid;
       grid-template-columns: 1fr 2fr;
       grid-template-rows: auto auto auto;
       gap: 2px;
       border: 8px solid orange;
    }
    

    NOTE: It’s typically best to avoid fixed pixel heights. We were only using them temporarily, so now we’re switching to auto (which will adapt to the height of the content in each element).

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

    • The row heights now only take up the height of the content.

Naming Grid Lines

Instead of referring to lines by numbers, we can name them.

1. Switch back to your code editor.

2. We’ll start by naming the column lines. In the .container rule add the following bold code:

   .container {
      display: grid;
      grid-template-columns: [container-start] 1fr 2fr [container-end];
   

   Code Omitted To Save Space

   }

3. Each line can have multiple names. In the .container rule’s grid-template-columns property, add the following bold code:

   grid-template-columns: [container-start nav-start] 1fr [nav-end] 2fr [container-end];
   

4. In the .container rule’s grid-template-columns property, add the following bold code:

   grid-template-columns: [container-start nav-start] 1fr [nav-end main-start] 2fr [main-end container-end];
   

5. Now we’ll name the row lines. In the .container rule break the grid-template-rows value onto multiple lines as shown below in bold:

   .container {
      display: grid;
      grid-template-columns: [container-start nav-start] 1fr [nav-end main-start] 2fr [main-end container-end];
      grid-template-rows: 
         auto 
         auto 
         auto
         ;
      gap: 2px;
   

   Code Omitted To Save Space

   }

6. In the .container rule add names for the outer container lines as shown below in bold:

   .container {
   

   Code Omitted To Save Space

      grid-template-rows:
         [container-start]
         auto 
         auto 
         auto
         [container-end];
      gap: 2px;
   

   Code Omitted To Save Space

   }

7. In the .container rule add names for the main section’s lines as shown below in bold:

   grid-template-rows:
      [container-start]
      auto 
      [main-start]
      auto
      [main-end]
      auto
      [container-end];
   

8. In the .container rule add names for the nav’s lines as shown below in bold:

   grid-template-rows:
      [container-start]
      auto 
      [main-start nav-start]
      auto
      [main-end nav-end]
      auto
      [container-end];
   

9. Lastly, in the .container rule add names for the footer’s lines as shown below in bold:

   grid-template-rows:
      [container-start]
      auto 
      [main-start nav-start]
      auto
      [main-end nav-end footer-start]
      auto
      [container-end footer-end];
   

10. Now that we’ve named the lines, we can change from using line numbers to line names when positioning our grid items. Edit the header rule as shown below in bold:

    header {
        grid-column: container-start / container-end;
        background: #0db8e8;
    }
    

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

    • The page should look the same, but the code is clearer.
12. Switch back to your code editor.

13. Because we named the start and end lines, we can shorten our code even more. Edit the header rule as shown below in bold:

    header {
        grid-column: container;
        background: #0db8e8;
    }
    

    NOTE: Using a name with -start and -end is special. Grid understands the first part is a name!

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

    • The page should look the same, but the code is even clearer.
15. Switch back to your code editor.

16. We can update the footer the same way. Edit the footer rule as shown below in bold:

    footer {
        grid-column: container;
        background: #9700da;
    }
    

17. In the nav rule, replace grid-row with grid-column as shown below in bold:

    nav {
        grid-column: nav;
        background: #0978e2;
    }
    

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

    • Once again the page should still look the same, but the code is clearer. If the layout is messed up, you probably missing changing grid-row to grid-column in the nav rule. Go back and check your code.

Optional Bonus: Setting a Max-Width & Centering

The grid container div can be sized and centered like any normal div, so let’s try it.

1. Switch back to your code editor.

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

   .container {
      max-width: 1000px;
      margin: auto;
      display: grid;
   

   Code Omitted To Save Space

   }

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

   • Notice the width of the grid container can’t get wider than 1000px, and is centered on wider screens.