Skip to main content

Intro to Flexbox & CSS Grid

Learning Objectives​

Students Will Be Able To:
Describe the Use Case of Flexbox & CSS Grid
Use Flexbox for One-Dimensional Layout
Use CSS Grid for Two-Dimensional Layout

Road Map​

  1. Setup
  2. Intro to Flexbox & CSS Grid
  3. Why use Flexbox?
  4. Flexbox Fundamentals
  5. Your First Flexbox
  6. Main Axis & Cross Axis
  7. Why use CSS Grid?
  8. CSS Grid Fundamentals
  9. Your First CSS Grid
  10. Making Grid Items Span Multiple Columns & Rows
  11. Grid Gaps
  12. Flexbox & CSS Grid Practice Sites
  13. Further Study
  14. References

Videos​

Video 📹 Link

1. Setup​

For this lesson, we'll be using replit.com to learn about Flexbox & CSS Grid:

  1. Create a new HTML/CSS/JS Repl

  2. Name the Repl something like Flexbox & CSS Grid

  3. Sprinkle in a bit of starting CSS inside of style.css:

style.css
* {
  /* height & width now includes border & padding */
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Helvetica;
}

2. Intro to Flexbox & CSS Grid​

As a front-end developer, you will be required to precisely lay out the elements on web pages.

Prior to Flexbox & CSS Grid, laying out the parts of a web page - from basic navigation headers to complex full-page layouts - was anything but a straightforward process. Luckily, Flexbox (and later Grid) came along and they were both game changers, making web design easier, more efficient and more intuitive. We are even able to use them together, either side-by-side (or nested within the other), they actually complement each other quite well.

The big difference between Flexbox and CSS Grid is how they work, more specifically how they lay out their children:

Flexbox​

3. Why Use Flexbox?​

Flexbox excels at assisting devs with the following tasks:

  • Centering content & elements within a container element

  • Spacing child elements within a container uniformly

4. Flexbox Fundamentals​

We use a CSS display: flex; declaration to make an element a flex container, for example:

section {
  display: flex;
}

The above would make all <section> elements flex containers and all direct children will automatically become flex items.

Let's browse to what has become the de facto guide to Flexbox to check out some of its features and properties.

5. Your First Flexbox​

We're going to make a navigation bar using Flexbox.

Add the following markup for the nav bar inside of the <body>:

<nav>
  <div>HOME</div>
  <div>ABOUT</div>
  <div>WIDGETS</div>
  <div>LOG OUT</div>
</nav>

Run the Repl to check it out - definitely not what we're looking for - yet!

Because the <nav> & <div> elements are block elements, they each want to take up all available width, but not for long...

❓ Which element do we need to make the flex container?

The <nav> element.



Let's make it a Flexbox Container:



Let's make it a Flexbox Container:

nav {
  display: flex;
}

Run again, and we can make the following observations:

  • The <div> elements have become flex items and no longer behave as block elements - their width has collapsed to that of their content and they are willing to sit side-by-side other elements.

  • The flex items are laid out horizontally in a row - this is the default layout of a flex container.

👉 YOU DO: CSS Practice (4 mins)​

This just in... Our client has informed us that:

  • The navigation bar must:

    • Be 50px in height
    • Have a background color of #a2cbb6.

  • The menu items in the nav bar need:

    • A font size of 20px
    • A margin of 10px on all 4 sides
    • A text color of #f3dba8

  • Add the CSS to make the client happy!

6. Main Axis & Cross Axis​

A flex container has a flex-direction property that defines the direction of its main axis.

There are four values:

  • row (the default)
  • row-reverse
  • column
  • column-reverse

Let's check them out by adding a flex-direction to the <nav>.

A flex container's cross axis represents the opposite direction of its main axis.

For example, if the container's flex-direction is row (the default), the:

  • main axis is horizontal (row)
  • cross axis is vertical (column)

If the flex-direction is set to column, they flip:

  • main axis is vertical
  • cross axis is horizontal

The orientation of the main axis & cross axis impact the behavior of other flex properties, such as:

  • justify-content: Controls alignment for the main axis

  • align-items: Controls alignment for the cross axis

flex-direction
(determines the
main axis)		justify-content
(lays out the main axis)		align-items
(lays out the cross axis)
row (default)horizontalvertical
columnverticalhorizontal

Be sure to check out the cool alignment values we can assign to justify-content & align-items in the Guide to Flexbox we browsed to earlier.

Back to the <nav> Bar​

With the following alignment properties set:

style.css
nav {
  display: flex;
  flex-direction: row; /* default */
  justify-content: flex-start; /* default */
  align-items: center; /* center vertically (cross-axis) */
  height: 50px;
  background-color: #a2cbb6;
}

The nav bar is not looking too bad...

However, we want the LOG OUT menu item to be aligned on the right like this:

We could wrap the other elements with another element and set justify-content to space-between.

Or, we can use this bit of CSS goodness:

nav > div:last-child {
  margin-left: auto;
}

Assigning auto makes the left margin of the nav's last div to take up available space.

❓ Review Questions - Flexbox (2 mins)​

  1. When an element has a CSS property of display: flex;, that element becomes a Flex C__________.

Container

  1. When an element has a CSS property of display: flex;, its direct children become Flex I_____.

Items

  1. What value is the default for the flex-direction property?

row

  1. Is it justify-content or align-items that controls the alignment along the main axis?

justify-content

CSS Grid​

7. 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.

8. CSS Grid Fundamentals​

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

CSS Grids have the following "parts":

  • Tracks
  • Cells
  • Areas
  • Grid Lines
  • Gaps

As you might expect, there are plenty of CSS Grid-related properties and values.

Here's the CSS Grid equivalent of that Flexbox guide we used earlier.

Let's browse to it and take a peek.

9. Your First CSS Grid​

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

Let's modify the existing CSS to turn the <body> element into a grid container:

style.css
body {
  margin: 0;
  font-family: Helvetica;
  <!-- new css below -->
  height: 100vh;
  display: grid;
}
note

Again, CSS Grid is handy beyond laying out the "page" - it's also awesome for laying out smaller UI components such as the "Profile Card" in the upcoming lab.

Using height: 100vh; will make the <body> fill the height of the browser window so that the <footer> is at the bottom.

tip

vh, and its other viewport unit siblings are awesome! Be sure to check out the link in the Further Study section when you have a chance.

Now let's add the additional HTML required by the UI:

index.html
<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 bit of styling to change the color of the elements we just added so that we can more easily see them:

style.css
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?

Centering content is very common, so let's create a class that will make any element with that class a Flexbox that centers its content:

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

👉 YOU DO: CSS Practice (1 min)​

Add the newly created flex-ctr class to the following elements:

  • <aside>
  • <main>
  • <footer>

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

  • A CSS Grid has a single column by default.
  • By default, each grid item is placed in a column from left-to-right until there are no more columns, then after the columns are filled, a new row is created.

Now, let's define the columns and rows necessary to layout our page as desired.

❓ Go back and examine the page layout we want, then answer the following (1 min)​

Hint: Think "spreadsheet"

How many columns will we need to define to attain the desired layout?

2

How many rows?

3

Okay, let's define those columns and rows:

style.css
body {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 50px 1fr 30px;
  ...
info

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. Note that fr is similar to using the percentage unit (%), however, % does not consider any grid gap set, therefore its use can lead to the grid items overflowing its grid container.

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.

To fix the layout we need both the <nav> and the <footer> to span two columns each...

10. Making Grid Items Span Multiple Columns & Rows​

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 and then using the grid-area property on the grid item.

However, let's take a look at a somewhat simpler option that would work well in this case...

The grid-column CSS property determines which grid lines a grid item starts and ends on. For example:

style.css
nav,
footer {
  grid-column: 1 / 3;
}
note

Note: The lines are numbered starting with 1 (not zero).

We can also use span x to specify how many columns we want the grid item to span:

style.css
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.

11. Grid Gaps​

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:

style.css
body {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-template-rows: 50px 1fr 30px;
  gap: 5px;  /* specifies width of grid lines */
  ...
note

Note: Other than their width, it's not possible to style grid gaps - the grid's background simply shows through. Also, the gap property sets the width of both row and column gaps, if you want different widths, use the row-gap and column-gap properties.

12. Flexbox & CSS Grid Practice Sites​

We've covered the key fundamentals of these two fine additions to CSS.

For a fun way to practice and learn more, check out these awesome apps:

13. Further Study​

Check out this article to learn more about viewport units!

14. References​

MDN - Flexbox

MDN - CSS Grid Layout

Learn CSS Grid