Skip to main content

CSS Grid

What is a Grid?​

CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance).

What about Flexbox?

Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

Terminology​

CSS Properties​

Tip: Focus on short list of critical properties below

  • Creating the Grid

    • grid-template-columns
    • grid-template-rows

  • Placing items in the grid

    • grid-column-[start|end]
    • grid-row-[start|end]

...or use their correspondending short hand properties:

  • Creating the Grid
    • grid-template: [row1 row2 rowN.../ column1 column2 columnN...]
  • Placing items in the grid
    • grid-column: [start / end]
    • grid-row: [start / end]

Browser Support​

Techniques for Older Browsers​

  • Feature Detection
  • Prefixed rules for Internet Explorer
  • Progressive Enhancement

Reference​

Exercises

Basic Grid​

  1. Create index.html

  2. html:5

  3. div{Div $}*6

  4. Create a basic grid.

    index.html in <head></head>​

        <style>
        body {
            display: grid;
            grid-template: 100px 100px/ 150px 150px 150px;
            grid-gap: 15px 20px;
        }
        </style>

  5. Open the page in browser with DevTools (Chrome, Edge, Firefox). No web server needed just open index.html from the file system.

  6. Open browser DevTools > Right Click page and choose Inspect > Click grid next to <body> element

  7. Comment out all the divs inside the body tag

  8. Refresh the page. Click grid next to <body> element again. Notice the grid is there even when there are no items in it.

  9. Uncomment back in all the divs inside the body tag

    Cheat Sheet​

    <style>
        body {
          display: grid;
          grid-template: row1 row2 rowN.../ column1 column2 columnN...;
          grid-gap: row-gap column-gap;
        }
    </style>

    Cheat Sheet (no shorthand properties)​

    grid-template is the shorthand property for grid-template-rows/grid-template-columns

    grid-gap is the shorthand property for grid-row-gap/grid-column-gap

    <style>
        body {
        display: grid;
        grid-template-rows: row1 row2 rowN...;
        grid-template-columns: column1 column2 columnN...;
        grid-row-gap: row-gap;
        grid-column-gap: column-gap;
        }
    </style>

  10. Create a 4 row, 2 column grid

  11. View the grid with your browser DevTools again. Notice how the grid items automatically fill in the grid.

  12. Create a 3 row, 2 column grid

  13. View the grid with your browser DevTools. Notice how the grid items automatically fill in the grid.

  14. Change the grid gaps and inspect the changes.

    Finished Code

    index.html​

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Grid</title>
        <style>
          body {
            display: grid;
            grid-template: 100px 100px/ 150px 150px 150px;
            grid-gap: 15px 20px;
          }
        </style>
      </head>
      <!-- div{Div $}*6 -->
      <body>
        <div>Div 1</div>
        <div>Div 2</div>
        <div>Div 3</div>
        <div>Div 4</div>
        <div>Div 5</div>
        <div>Div 6</div>
      </body>
    </html>

Size Grid Tracks​

  1. Use auto to fill in the middle column and row.
body {
  display: grid;
  grid-template: 100px auto 100px / 150px auto 150px;
  grid-gap: 20px;
}
  1. Inspect the grid. Notice it doesn't stretch vertically.
  2. Add height to the html and body tags so the grid fills the page.
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        display: grid;
        ...
      }
    </style>

  1. Inspect the grid. Notice it fills the entire page.

  2. Resize the page and notice that the the left, right columns and top, bottom rows are a fixed size even as you give the page grows or shrinks.

  3. Create a more responsive design by letting the left, right columns and top, bottom rows grow with the minmax() function.

    body {
      display: grid;
      grid-template:
        minmax(10%, 20%) auto minmax(10%, 20%) / minmax(10%, 20%)
        auto minmax(10%, 20%);
      grid-gap: 20px;
    }

Place Items on the Grid​

  • Place Grid Items (children) on the Grid

  1. Remove all the <div> elements inside the body tag and replace them with the semantic markup below for a site layout.

        <body>
    -       <div>Div 1</div>
    -       <div>Div 2</div>
    -       <div>Div 3</div>
    -       <div>Div 4</div>
    -       <div>Div 5</div>
    -       <div>Div 6</div>
        </body>
    <body>
      <header>Header</header>
      <nav>Side Nav</nav>
      <main>Main</main>
      <aside>Aside</aside>
      <footer>Footer</footer>
    </body>

  2. Place the grid items (the child items of the element marked display:grid) on the grid as follows.

      <style>
          html,
          body {
            height: 100%;
          }
          body {
            display: grid;
            grid-template:
              minmax(10%, 20%) auto minmax(10%, 20%) / minmax(10%, 20%)
              auto minmax(10%, 20%);
            grid-gap: 20px;
          }
          header {
            grid-row: 1/2;
            grid-column: 1/4;
          }
          nav {
            grid-row: 2/3;
            grid-column: 1/2;
          }
          main {
            grid-row: 2/3;
            grid-column: 2/3;
          }
          footer {
            grid-row: 3/4;
            grid-column: 1/4;
          }
        </style>

  3. Inspect the grid and click on the header, footer, etc to see where the items are placed on the grid.