In this exercise, you will practice using the `span` keyword to reposition elements in a CSS Grid layout.

We start with a 5x5 grid layout with a pink box, and a purple box:

![screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1684523225/tutorials/images-19.1_Exercise12_Intro.mp4/191_exercise12_intro_4_00-18120-what-id-like-you-to-do-is-recreate-this-layout-here_yy9ac6.png)

## Challenge

Your challenge is to use the `span` keyword to reposition the pink box and the purple box to match the target layout:

![screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1684523225/tutorials/images-19.1_Exercise12_Intro.mp4/191_exercise12_intro_5_00-39520-so-this-is-our-initial-starting-point-you-dont-need-to-touch-the-html-as-always_y7c6qf.png)

You can position the elements using any method you prefer, such as `grid-column-start`, `grid-column-end`, or the `grid-column` shorthand, but make sure to use the `span` keyword.

Test what you've learned so far by duplicating a layout using shorthand syntax and the span keyword.

As a reminder, here's the target layout we want to recreate:

![it's starting](https://res.cloudinary.com/dwppkb069/image/upload/v1684523226/tutorials/images-19.2_Exercise12_Solution.mp4/192_exercise12_solution_2_00-11000-im-happy-with-where-its-starting_qtmxnb.png)

## Positioning the Pink Box

First, we need to extend the pink box so it spans four rows.

To do this, we can use the the `grid-row-end` property and the `span` keyword:

```css
/* inside of #pinkbox */
grid-row-end: span 4;
```

![screenshot](https://res.cloudinary.com/dwppkb069/image/upload/v1684523225/tutorials/images-19.2_Exercise12_Solution.mp4/192_exercise12_solution_4_00-26000-so-grid-row--end--and-i-can-say-span-four_zsbli1.png)

However, to make sure the pink box is always in the correct position in case the grid changes, we can specify the starting row and column:

```css
/* inside of #pinkbox */
grid-row: 1 / span 4;
grid-column: 1 / 2;
```

This ensures that no matter how much content is added, the pink box will always stay in its desired location.

## Positioning Purple Box

Next, we need to move the purple box down so it spans across two columns and three rows.

First, let's set the starting row of 3 and set the number of rows to span to 3:

```css
/* inside of #purplebox */
grid-row: 3 / span 3;
```

Now, we need to move the purple box over in the column direction. We want the column start to be at line 4, and it needs to span two columns:

```css
/* inside of #purplebox */
grid-row: 3 / span 3;
grid-column: 4 / span 2;
```

Here's the result:

![screenshot demo](https://res.cloudinary.com/dwppkb069/image/upload/v1684523226/tutorials/images-19.2_Exercise12_Solution.mp4/192_exercise12_solution_5_00-28000-and-there-we-go_llyl9s.png)

And that's it! We have positioned the pink and purple boxes using the `span` keyword in combination with the `grid-row` and `grid-column` properties.

You could also achieve the same result using `grid-row-start`, `grid-row-end`, `grid-column-start`, and `grid-column-end`, but using the shorthand properties makes the code more concise and easier to read.


Specific Placement with Shorthand Properties and Span

[0:00] Let's begin with the pink box. Here's what we have right now. I need to extend it so it spans four rows. One, two, three, four. I'm happy with where it's starting. What I could do, the simplest option is just to do this. Grid, and then we were working with the row direction. Grid-row-end, and I could say span 4. There we go.

[0:27] I could also do it with grid-row-start and have it span 4. Or I could just work with grid-row and have it span 4.

[0:37] The only trouble here is that technically it's not rooted to this exact location. It just happens to be inserted into the grid in this location. I know I said we don't need to touch the HTML, but if I happen to reorder this for example, or have two purple boxes...Now this pink box still spans four rows, but it's not in the correct position where I wanted it to be.

[1:04] Instead of relying on the just implicit location, the natural place where it falls into the flow, I can get specific and say I want you to start at row 1 and span 4. That still is only for the row direction.

[1:18] For the column direction, I can say grid. You might think this is unnecessary because it's fine where it is. This is where we want it. If we want to be very specific and make sure it's always right here, I want it to start at line 1 and end at line 2.

[1:36] This way, no matter how much content is in here, if I have a whole bunch of purple boxes, it always stays right there. If instead I hadn't rooted the column correctly, and hadn't mentioned the grid-row-start, now take a look at where it goes. That's just a little detour, but always good to be specific. Let's get rid of all those extra purple boxes.

[2:01] Now we need to work on moving our purple box down to the right spot. Notice it spans across two columns and spans three rows. Let's start with the row direction.

[2:13] If we look at the row lines, we have one, two, three. I'm going to want it to start on grid row line three. I'll use the shorthand, grid-row. I'll start on 3. Then I want it to finish three, four, five, six. I don't want to use the lines. The point of this exercise is to use span. I'm going to tell it to span 3. Start on line 3 and span 3. That's what we see.

[2:39] Now I just need to move it over in the column direction. I want the column start to be line one, two, three, four. Grid-column. I want it to start on line 4. Then it needs to span 2 columns. There we go. I could have also said go from 4 to line 6, but that was not the point of the exercise. I wanted us to use the span keyword, so that works.

[3:06] Same thing for grid-column up here. I guess I could say span 1, although I pretty much never do that. I would just prefer to put the line number because it's easy to go from 1 to 2. Going from 1 and spanning 4, you have to do a bit of counting to replace it with line 5. Which is not hard, but I like to use the span keyword a lot of the time.

[3:28] That is it for this exercise. You could have done it with grid-row-start, grid-row-end, grid-column-start, grid-column-end, and so on. Or grid-row and grid-column as the shorthand.

Practice Duplicating a Layout with Shorthand Properties and Span

[0:00] It's time for another exercise. This time you'll get some practice using span, the span keyword. Again, we have our 5x5 grid that I've pre-set up for us. This time we have two boxes, our good friend the pinkbox and purplebox. What I'd like you to do is recreate this layout here. Specifically, I'd like you to do it using the span keyword.

[0:21] You can use many different ways of actually positioning the element, whether we're talking about grid-column-start and grid-column-end or the grid-column shorthand. However you want to do it, it doesn't matter, but I'd like you to use the span keyword.

[0:35] This is our initial starting point. You don't need to touch the HTML, as always. In the CSS, all you need to touch is the pinkbox styles and the purplebox styles. Leave the grid itself alone. All right, so I'll leave you with this. This is what we're trying to recreate using the span keyword.

Creating CSS layouts that behave as expected no matter the viewport size used to be a frustrating, time-consuming experience.
But thanks to CSS Grid, these headaches are a thing of the past!
Through a series of concise lectures and hands-on exercises, this comprehensive tutorial will guide you through everything you need to know about creating responsive layouts for all of your web applications.

## CSS Grid Basics

Dive right into CSS Grid! You'll learn how to enable grid, define basic layouts, and use DevTools overlays to help plan and debug grid lines and areas.

## Units and Utilities

Pixels are precise, but can lead to annoying calculations. Luckily CSS Grid supports alternatives like percentages and fractional units that can be combined to create more complex layouts without having to do math. Useful shorthand properties and helpful functions are also introduced.
## Positioning Elements by Lines
Learn to take a more specific approach to creating layouts by specifying the lines where elements should be placed.

## Grid Areas

When the layout you're implementing is too complex for specifying lines, grid areas are the way to go. In this section you'll learn to visualize your layout as you create named areas, including support for empty spaces.

## The Implicit Grid

You've seen a few ways to explicitly define layouts. Now it's time to look behind the scenes at the implicit grid. Understanding this behavior allows you to change the default placement algorithm and support dynamic layouts.

## Creating Responsive Grids

Up until now the layouts we've created have been meant for larger computer screens. In this section you'll practice creating grid layouts that seamlessly adjust to different viewport sizes with help from media queries and useful CSS Grid functions.

## Building an Example Layout

To wrap up the CSS Grid tutorial, follow along as a common layout is built step-by-step following the "mobile first" approach.


Learn how to activate CSS Grid for a container element and the difference between 'display: grid' and 'display: inline-grid'.

Enabling CSS Grid

The grid developer tools available in modern browsers allow you to visually inspect your CSS grids with overlays and track lines.

Visualize CSS Grid with DevTools

The `grid-template-columns` property is used to define column widths within a grid container in CSS Grid.

Define CSS Grid Columns with grid-template-columns

Practice defining columns by converting a single-column layout into an evenly sized three-column grid.

Implement a Three-Column Layout

Converting a Single-Column Layout

The `grid-template-rows` property is used to define rows within a CSS Grid container.

Define CSS Grid Rows with grid-template-rows

Practice changing the appearance of a layout without changing its markup.

Specifying Row Heights

Adjust Row Heights in an Existing Layout

The `grid-template-columns` and `grid-template-rows` properties can both be added to create more complex layouts.

Combining Rows and Columns to Create Layouts

Defining Row and Column Sizes

Practice Creating a Two-Column, Three-Row Layout

Colorful boxes help demonstrate CSS Grid concepts, but using paragraph text provides a more realistic example.

Paragraph Layout with CSS Grid

CSS Grid Basics

Using Percentage Units

Percentages are easier than pixels, but even they can reach a limit. Fractional units provide a flexible approach to layouts.

Simplify Grid Layouts with Fraction Units

Create a three-column layout with equal-sized columns and two rows. The top row should be twice as large as the bottom row. The layout should be responsive.


Define a Three-Column, Two-Row Grid

Implement a Layout with Fractional Units

You aren't stuck with just one unit when defining a grid. Mixing units allows for more complex layouts.

Mixing Fractions and Pixels

CSS Grid's `repeat` function is a time saving way to define your layouts.

Simplify Layout Definitions with repeat

Practice using fractional units and the `repeat` function by implementing a checkerboard layout.

Use Fractional Units and repeat to Define a Layout 

Implement a Checkerboard Layout

So far we've been defining rows and columns manually. The `grid-template` shorthand allows us to define both at once.

Save Time with the grid-template Shorthand

CSS Grid supports adding gaps between rows and columns, allowing you to put visual space between elements.

Adding Gaps between Rows and Columns

Implement a 3x7 Grid Layout

Practice Using Shorthand Properties and Gaps

Units and Utilities

Items in a grid can be positioned based on column and row lines in the grid.

Positioning with Grid Lines

Using the `grid-column-start` property allows you to set where items in the grid should begin.

Specify the Column Start Position 

In this exercise, you'll practice moving an element using line numbers.

Moving an Element to a New Column

Setting an Element's Column Position

Just as you can specify the column start, you can set the row start.

Specify the Row Start Position

In this exercise you are tasked with moving an element to a specific location.

Positioning with grid-column-start and grid-row-start

Practice Positioning Elements

In addition to specifying the start lines, we can specify where an element should end.

Specify the End Line

Test your understanding by reproducing a given layout.

Positioning Across Multiple Rows & Columns with Span

Practice Moving and Spanning Grid Items

So far we've been specifying columns and rows manually. CSS Grid offers a shorthand syntax that will save you some keystrokes.

Grid Column and Row Shorthand

Use the grid row and column shorthand to position multiple boxes in a layout.

Positioning with Shorthand

Practice Shorthand Positioning

The `grid-area` property gives us another way to position an element using grid lines.

Positioning an Element with grid-area

Using the span Keyword to Position Elements

Until now we've been counting grid numbers. CSS Grid allows you to add names to lines, then position items accordingly.

Customize Grid Line Names

Positioning Elements by Lines

So far we've primarily used numbers when defining layouts. Before we look at an alternative, let's build the layout that will be reproduced.

Building an Example Layout with Numbered Columns and Rows

Using what you've learned so far, practice using CSS Grid to create a web page layout.

Web Page Layout Solution

Practice Creating a Web Page Layout

CSS Grid's `grid-template-areas` property allows you to assign names to the areas between track lines.

Naming Areas of the Grid

Once you've named your grid areas, you can assign elements to use that space.

Assigning Elements to Named Grid Areas

Recreate a layout using named areas instead of line numbers.

Recreate a Layout Using Named Grid Areas

Practice Using Grid Template Areas

From just a visual of a layout, you can reason about how the grid areas should be defined.

Creating a Complex Layout with Grid Areas

CSS Grid allows you to leave an empty space in your grid layout, while specifying how other elements flow.

Leaving Empty Spaces in Grid Template Areas

Grid Areas

So far we've explicitly specified the behavior of our grid layouts. However, there is also implicit grid behavior that affects how content is placed.

Understanding the Implicit Grid in CSS Grid

Test your understanding of the implicit grid by recreating a layout that dynamically supports any number of elements.

Dynamically Setting Row Heights in a Layout

Create a Dynamic Grid with Equally Sized Boxes

The `grid-auto-flow` property can be used to change the default direction of element placement in CSS Grid.

Changing the Default Placement Algorithm

The `dense` modifier keyword tells CSS Grid to pack elements into the grid.

Row Dense and Column Dense Auto Flow

Test your understanding of how to modify the behavior of grid elements.

Change Grid Content Flow

Grid Direction Exercise

In addition to rows, column behavior in the implicit grid can be modified.

Grid Auto Columns and the Implicit Grid

The Implicit Grid

CSS Grid's `minmax` function allows you to define minimum and maximum sizes for grid items.

Specify Ranges with the minmax Function

Combining `repeat` function works well with `minmax` to define flexible layouts without the constraints of hard-coded values.

Combining minmax with repeat to Define Layouts

Test your understanding by recreating a given layout.

Specify a Minimum Column Size with minmax

Practice Recreating a Minimum Size Layout

Media queries can be used to define grid behavior when the viewport reaches a given size.

Define a Responsive Grid with Media Queries

CSS Grid can responsively resize and reorder elements as the screen size changes.

Responsively Changing Grid Template Areas

Test your understanding of media queries and `grid-template-areas` to make a layout reponsive

Updating a Layout to be Responsive

Practice Implementing Responsive Grid Template Areas

The `auto-fit` feature in CSS Grid allows you to create a layout that adapts to different screen sizes without the need for media queries.

Automatic Responsiveness with Auto Fit

Test your understanding by recreating a layout that adapts to different screen sizes.

Defining Grid Template Columns with Auto Fit

Practice Defining a Responsive Layout

The `auto-fit` and `auto-fill` features in CSS Grid have similar names and functionality, but there are some nuances to their behavior.

Comparing auto-fill and auto-fit

Creating Responsive Grids

An overview of one of the most common page layouts and how it behaves at different viewport sizes.

Overview of a Common Layout

We'll start by implementing the layout as a mobile-style single column layout.

Defining a Single-Column Layout

Moving on, we'll add a media query to shift the layout to use two columns.

Adding a Two-Column Layout

With the smaller viewport layouts taken care of, we'll implement a layout for large screen sizes.

Adding a Large Screen Layout

In this example we'll look at implementing a responsive layout that supports cards of different sizes without writing media queries.

Transcript

Practice Duplicating a Layout with Shorthand Properties and Span

Transcript