DevClassroom

DevClassroom

You're seeing this because you're a teacher 🤓

🎯 Your main goal for this lesson

We're introducing a few higher-level concepts related to CSS in this lesson. However, your main goal for this lesson is to help students to understand the arrangement of their pages and how content is placed within the DOM.

🧠 Things to keep in mind when teaching

This is probably the most difficult CSS we'll explore during this course. There will be a light-bulb moment for student, but they won't all come at the same time. Keep them positive and help guide them through their issues.

🚀 Lesson Plan

Activity One: 20 minutes

Give students a few examples of different types of sites. Choose a news source, your school's website (again), and something more up their alley...they're younger than us after all. Ask them to assess the arrangement of different elements on the page and ask them, "What's the point of layouts like these? Why are the pages arranged the way they are?"

Activity Two: 30 minutes

Guide them through the lesson. As before, you can use the content directly from this lesson or you can point students in the direction of the videos for this lesson. There are two broad concepts with grids and flexbox. This lesson could easily take up a couple of days as students work through the exercises at their own pace.

Activity Three: 10 minutes

Take the formative assessment at the end of class. Work towards mastery.

Creating a Layout with CSS

By the end of this lesson, you'll be able to...

  • Utilize grids to create two-dimensional layouts.
  • Utilize flexbox to create one-dimensional layouts for components.

Layouts with CSS

Up until this point, we've only focused on using CSS to style elements. However, CSS can be utilized to style large-scope elements to create unique and intricate layouts. So far, we haven't discussed how to create components that have multiple columns or have responsive spacing of their individual items and content. In this lesson, we'll learn some new concepts related to enabling you to create some really unique and creative styles.

Grid and Flex

To begin, there are two concepts we'll examine in detail in this lesson: grid and flexbox.

Grids are used for creating two-dimensional layouts; you can think of them as, generally, being larger in scope compared to flexbox. Grids focus on aligning elements into columns and rows but there are many different combinations available. They're highly customizable, responsive, and allow for quick transformation to implement your designs into browser-rendered code.

Where grids are two-dimensional, flexbox is one-dimensional. On the surface, this sounds like it's less-than. It's not! Flex excels in defining an element as either a row or a column and, from there, styling the contents of it.

Creating Grids

Initially, the sets of key-value pairs to build a grid can seem confusing. However, with a bit of practice, they'll quickly fall into your repertoire of skills. To get started with a grid, we'll typically need these style rules:

1.gridClass {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-gap: 20px;
5}

What are these different properties doing? Well, let's take a look at each:

  • display is set equal to grid. We're simply telling the browser, "Anything with a .gridClass class should be treated as a grid. It should get access to all the special style rules a grid can use."

  • grid-template-columns is set equal to the number of columns we want our grid to have. In the example above, we've utilized the fr - or remaining free space unit. As we've written it, this will create three equal-area columns within the parent container.

  • Finally, grid-gap is used to give a bit of breathing room between each of our columns.

With this basic pattern, you can create a lot of different grid implementations. Here's a few variations with some illustrations.

1.gridClass {
2  display: grid;
3  grid-template-columns: 1fr 2fr;
4  grid-gap: 40px;
5}
Grid example 
1.gridClass {
2  display: grid;
3  grid-template-columns: 900px 1fr;
4  grid-gap: 20px;
5}
Grid example 
1.gridClass {
2  display: grid;
3  grid-template-columns: 1fr 3fr 1fr;
4  grid-gap: 20px;
5}
Grid example

Grid Areas

Grid areas give us even more control over the appearance of our grids. We can assign certain elements in the DOM to certain grids on the page. We can literally tell the DOM, "Put element n in grid-area x." This enables us to create layouts like this:

Grid example

Using this HTML:

1<body>
2  <div class="gridClass">
3    <div class="nav"></div>
4    <div class="headline"></div>
5    <div class="featured"></div>
6    <div class="footer"></div>
7  </div>
8</body>

With this CSS:

1.gridClass {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-gap: 20px;
5  grid-template-areas:
6    "nav nav nav"
7    "head head feat"
8    "foot foot foot";
9  grid-gap: 20px;
10}
11
12.nav {
13  grid-area: nav;
14  width: 100%;
15  height: 20vh;
16  background: red;
17}
18
19.headline {
20  grid-area: head;
21  width: 100%;
22  height: 50vh;
23  background: blue;
24}
25
26.featured {
27  grid-area: feat;
28  width: 100%;
29  height: 50vh;
30  background: grey;
31}
32
33.footer {
34  grid-area: foot;
35  width: 100%;
36  height: 20vh;
37  background: red;
38}

Creating a Flexbox

Once we have our grid set up, we can start styling the individual 'sections' or grid-areas within it. Flexbox is typically what you'll reach for to style these different components.

Flexbox has a property called flex-direction that's set to row by default. However, the alternative option is column. Looking at our design from the previous section, it wil be best to use row for the nav component since it spans three columns of our grid. For an area like feat, it probably makes more sense to use the column value for the flex-direction. That way, each featured story can appear on its own row descending the grid-area.

That means our nav class's rules will change to something like this:

1.nav {
2  grid-area: nav;
3  display: flex; /* no need to specify row since that's the default */
4  width: 100%;
5  height: 20vh;
6  background: red;
7}

While featured will change to this:

1.featured {
2  grid-area: feat;
3  display: flex;
4  flex-direction: column;
5  width: 100%;
6  height: 50vh;
7  background: grey;
8}

Spacing

Both grids and flexboxes have unique spacing properties that allow us to choose how space and distance between contents are treated.

When dealing with spacing and arrangement of contents, you'll see two terms often: justify, which refers to how elements are arranged on the horizontal axis; and align, which refers to how elements are arranged on the vertical axis.

For example, if we want to easily center items in a grid, we could reach for some css like this:

1.headline {
2  grid-area: head;
3  display: grid;
4  grid-template-columns: 1fr 1fr;
5  /* Here's where we're centering things on both axes */
6  justify-items: center;
7  align-items: center;
8  width: 100%;
9  height: 50vh;
10  background: blue;
11}

For a flexbox, maybe it would make more sense to space items out evenly across the dimensions of the element:

1.nav {
2  grid-area: nav;
3  display: flex;
4  /* Spacing them out */
5  justify-items: space-evenly;
6  /* Making sure they're lined up vertically */
7  align-items: center;
8  width: 100%;
9  height: 20vh;
10  background: red;
11}

Next Up

In our next lesson, we'll take a look at how to make sure our site looks the way we want it to, regardless of the user's screen size.

Assignments:

Your teacher may elect to give you this assignment in conjunction with this lesson or at a different time. Pay attention to your teacher's instructions for how/when to complete this assignment!

Client site: Responsive Layout

Previous and Next Lessons:

CSS Selectors

Responsive Styling