 Resources from Hiroko Nishimura in 2024

The CSS Grid Layout introduces a two-dimensional grid system allowing both fixed and flexible track sizes to be defined. This allows for easy management of an app's layout.

You'll start with an empty HTML file with minimal global styles applied in your CSS file. You will then iteratively add sections and items to your HTML page to structure through a CSS grid. You'll learn how to control a grid's columns and rows and define the size of each respectively. 

By the end of the course, you'll have a fully responsive landing page that behaves how you expect it to on any device.

Cascading Style Sheets bring order and beauty to our applications.

Build Modern Layouts with CSS Grid

We will discuss the necessary CSS styles that we will need to start using CSS Grid. First, you'll download an index.html file and style.css from this [GitHub repo - lesson1 folder](https://github.com/hiroko/egghead-lesson/tree/master/cssgrid-course/01-lesson). 

This will contain some set up that will help you get up and running quickly. We'll discuss how to set and use CSS variables as well as box-sizing. `box-sizing` allows you to add border and padding without increasing the box-size, important for CSS grid!

Define Root Colors Variables and Set up Box-Sizing for a CSS Layout

Now that we have basic styles set up, it's time to get started applying some grid styles! First, we'll need a container and some items in our HTML to apply styles to. We'll create those divs with the classes applied and hop into our styles.css to make them a grid.

The first thing you'll notice is that when you apply `display: grid` for the first time nothing happens! This is expected so don't worry. Every grid needs rows and columns so that's exactly what we'll define with `grid-template-columns` and `grid-template-rows`.

### Lesson Challenge

In this lesson, we set up a grid with 2 columns and 2 rows. Use what you learned in this lesson to create 3 rows and 3 columns. Maybe try adding a few more items in your HTML to see the results!

Introduction to CSS Grid Rows and Columns with display: grid


🚨 **Update: grid-column-gap, grid-row-gap, grid-gap have all changed to be [column-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap), [row-gap](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap), and [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap). Behavior has not changed. Just swap out the syntax and it will still work.** 🚨

You can check your results of [lesson 02 challenge](https://egghead.io/lessons/css-introduction-to-css-grid-rows-and-columns-with-display-grid?pl=build-modern-layouts-with-css-grid-d3f5) with the starting code in this lesson! I added 3 rows and columns to my grid.

You can see that when we have a border on the boxes in our grid that they are all stuck together. This doesn't look great so let's fix it.

CSS Grid gives us a great tool to do just that. We will apply `grid-column-gap` and `grid-row-gap` to specify the space in-between our columns and rows.

### Lesson Challenge

CSS Grid gives us a shorthand version of what we used in the lesson to apply the same styles in one line instead of two. Your challenge is to use `grid-gap` to apply the same style in just one line. Play with the gap size to see the styles in action! 

Hint: row comes first!

Specify a Gutter in CSS Grid with gap (grid-gap)

For this lesson, you will need to install [Firefox Browser Developer Edition](https://www.mozilla.org/en-US/firefox/developer/) to use the CSS Grid dev tools available within the browser. 

Once installed, you can right-click on your HTML page, hit inspect, and look over to the right side of the tools. There is a grid section that you can open that will let you visualize your CSS Grid in a helpful way as you continue developing your app. This is great for troubleshooting if you don't know why your grid is misaligned.

Utilize Firefox Developer Tools to Visualize CSS Grid Styles

There are quite a few ways that we can set the width and height of our grid. To name a few, we have pixels (`px`), percentages, and fractional units (`fr`).

We'll start by setting our column width with percentages to see how we have really fine-grain control of each column width. We run into a couple of problems though. We have to do all the math ourselves. The more columns you have the more percentages you have to add up to 100. That's not fun. 😂  On top of that, percentages don't include the grid-gap spacing that you set! You'll have to figure that one out yourself.

This is where fr units come into play. The browser takes in the values you explicitly set, (e.g. percentages, pixels) and then splits the remaining space into fractional units (`fr`) automatically. 
You'll see how to mix percentages with `fr` units to make your grid look exactly how you'd like it.

### Lesson Challenge

Use your own words (maybe in a blog post? 😉 ) to explain why `fr` is the best option for grid.

Determine CSS Grid Sizing with the Fraction Unit (fr)

So far we've learned quite a bit about how to set columns and rows evenly in our CSS Grid. For page layouts, the sections are a little more varied than evenly spaced grids. 

Most websites have a header, content, and footer section. The header and footer typically span the width of the page while the content can vary.

We will use `grid-template-areas` to map our various sections to our CSS Grid. We will debug some common errors that you will encounter when working with grid areas.

Define a Page Layout with CSS Grid Using grid-template-areas

One thing you can't escape when styling is centering content. It's going to happen even if you use CSS Grid! 

We can define grids within grids, which will allow us to align our items within an area. We'll use `align-items` and `justify-items` to get this done!

### Lesson Challenge

Which axis does "justify" refer to? What is the keyword that refers to vertical position?

Align Content by Adding Styling to a CSS Grid Layout

Another common layout you'll run into with almost every website that you build is a navbar. CSS Grid has your back on this as well.
In our nav, we'll turn on `display: grid` and set `grid-auto-flow` to the column to have our nav items align themselves into one row.

The trick to aligning the logo to the left and the items to the right is to set `grid-template-columns` to `1fr` which will push the links to the right. We'll apply some additional styles to make it look exactly how we'd like it.

### Lesson Challenge

We have all of our links displaying in our header by default. Try creating a Hamburger 🍔 menu with CSS grid!

Build a Navigation Bar with CSS Grid Using grid-auto-flow

In many cases, you might have a specific area on your website that could benefit from using CSS Grid. Just because your whole page layout is using Grid doesn't mean you can't have a Grid within a Grid. 

You'll see how to style a Grid area full of items with more Grid. We'll turn grid on and start applying the usual suspects: `grid-template-columns` and `grid-gap`.

You'll see how CSS Grid implicitly adds its style to additional rows without you having to style them. This makes your layout flexible because you don't have to predict how many items are going to be in a  Grid area.

### Lesson Challenge

When should you let grid implicitly decide what to do vs. explicitly defining it yourself?

Create a Nested CSS Grid Layout

Typing the same thing over and over again is tiring!

The `repeat()` CSS function allows you to define a large number of columns or rows that exhibit a recurring pattern to be written in a more compact form. This function can be used in the CSS Grid properties `grid-template-columns` and `grid-template-rows`.

Use the repeat() CSS Function to Efficiently Define CSS Grid Rows and Columns

The `minmax()` CSS function defines a size range greater than or equal to min and less than or equal to max. 

Using the `minmax()` function, we can specify the width of our items and ensure that they remain between `200px` and `1fr` (the remaining space available). As the viewport is resized, the absolute value will change, but always within these two limits. 

With `auto-fit`, the number of columns is defined automatically, ensuring a responsive layout.

Define Size Range with the minmax() CSS Function to Create Responsive Grid Items

Once the browser screen width becomes smaller than a certain size, you can change the layout to fit the screen resolution or browser viewport width. You do this by utilizing media queries (`@media`) that redefine the values set like `grid-template-columns` and `grid-template-areas`. 

The `grid-template-columns` CSS property defines the line names and track sizing functions of the grid columns. While the `grid-template-areas` CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.

**Lesson Challenge** 

As a challenge, try to write a media query that would change the layout from horizontal to vertical when the screen size is below `700px`. 

Hint: use `@media` Queries, `grid-template-columns`, and `grid-template-areas`.

Create a Responsive Layout Using Media Queries with CSS Grid

Media queries (`@media`) are useful to establish breakpoints in your layout. Breakpoints are dependent on specific characteristics and parameters, such as screen resolution or browser viewport width. 

The `grid-auto-flow` CSS property controls how the auto-placement works, specifying how auto-placed items get inserted in the grid. 

We'll use both a media query and `grid-auto-flow` to flip the navigation from horizontal to vertical.

Topics

Instructors

Content Type

Hiroko Nishimura