Intro to CSS Grid





Click here to access recording


Learning Objectives

Students Will Be Able To:

  • Describe the Use Case of CSS Grid
  • Use CSS Grid for Two-Dimensional Layout



Roadmap

  • Why use CSS Grid?
  • CSS Grid Fundamentals
  • Your First CSS Grid


Why use CSS Grid?

  • CSS Grid is a great option when you have:

    1. A page layout like this (or as complex as you'd like):
    2. Any other "components" that would benefit from a grid-type layout such as a "profile card", in other words, CSS Grid doesn't have to apply to the whole page - it can be useful for laying out smaller "components" as well.


CSS Grid Fundamentals

  • Unlike Flexbox, CSS Grid lays out its grid items in two-dimensions.

  • CSS Grids have the concept of the following:

    • Tracks
    • Cells
    • Areas
    • Gaps
  • Let's examine a diagram to visually these components...



Your First CSS Grid

  • To try out CSS Grid, we'll continue to work in the Repl to layout this UI:

  • The following CSS turns the <body> element into a grid container:

    body {
  display: grid;
  height: 100vh;
  margin: 0;
  font-family: Helvetica;
}
  • Using height: 100vh; will make the <body> fill the height of the browser window so that the <footer> is at the bottom.


  • Let's add the additional HTML required by the UI:

    <body>
  <nav>
    <div>HOME</div>
    <div>ABOUT</div>
    <div>WIDGETS</div>
    <div>LOG OUT</div>
  </nav>
  <aside>SIDE BAR</aside>
  <main>MAIN CONTENT</main>
  <footer>FOOTER</footer>
</body>


  • Now for a touch of styling...

  • Let's change the color of the elements we just added so that we can more easily see them:

    aside {
  background-color: #a2b4da;
}

main {
  background-color: #f3dba8;
}

footer {
  background-color: #a2cbb6;
}
  • One more stylistic touch. What if we want to center the text in those elements both horizontally and vertically?

  • Wanting to center/center content is so common, let's create a class that will make any element with that class a Flexbox:

    .flex-ctr {
  display: flex;
  justify-content: center;
  align-items: center;
}


  • With the class defined - go ahead and add it to the <aside>, <main> & <footer> elements.

  • Using Chrome DevTools to explore the page's elements, we can make the following observations:

    • A CSS Grid has a single column by default.
    • Each grid item (direct child) was placed its own row by default.

  • Now let's define the columns and rows necessary to layout our page as desired. Go back, look at the UI we want to layout and answer these questions:

    • How many columns will we need to define?
    • How many rows?

  • Okay, let's define those column and rows:

    body {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 50px 1fr 30px;
  ...
  • The fr unit is used by CSS Grid to represent a fraction of the available space. So in our layout, the first column will be 1/5th the width of the window.
  • Running the Repl shows that we've made a mess. But notice how each grid item is simply being placed in each cell across the columns from left to right. This is the default behavior.
  • However, we need both the <nav> and the <footer> to span two columns each...
  • There are a couple of ways to make grid items cover rectangular grid areas.
  • One way is by defining grid-template-areas on the grid container; then using the grid-area property on the grid item.
  • However, in this lesson, we'll look at another option...
  • The grid-column CSS property determines which grid lines a grid item starts and ends on.

  • For example:

    nav, footer {
  grid-column: 1 / 3;
}
  • The lines are numbered starting with 1 (not zero).

  • We can also use span x to specify how many columns we want to span:

    nav, footer {
  grid-column: span 2;
}
  • Unsurprisingly, there's a grid-row property as well.
  • Both grid-column & grid-row are shorthand for grid-column-start & grid-column-end, and grid-row-start & grid-row-end, respectively.
  • The last thing we'll look at in regards to CSS Grid are grid gaps which specify the size of the grid lines.

  • Update the CSS of the <body> (grid container) to the following:

    body {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 50px 1fr 30px;
  grid-gap: 5px;  /* specifies width of grid lines */
  ...
  • Note that the grid gaps cannot be styled - the grid's background simply shows through.



Flexbox & CSS Grid Practice Sites

  • We've covered the key properties of these two fine additions to CSS, but...

  • Here are a couple of really fun ways to learn more about them:



References