A5 - CSS Grid Layout

This Assignment is an Extension!

We are also going to be looking at layouts shortly when we start CSS Frameworks. While completing this assignment will help you make sense of it all, it's not essential to be able to move onto the next step. Therefore, you can complete this optionally as an extension.

Run update within your Google Drive folder for this class to download the new files. Next, inside Visual Studio Code, open your Unit 2 folder (if it's not already open) and then navigate to the A5 subfolder. Inside, open the files a5.html and a5.css. Then from a5.html open a Live Preview tab.

You will see example of how you can split the information on the page into different rows and columns. I will go through the details in class, but will point out some of the basics below.

In the HTML

Here's an example of creating three areas:

<h1>A Three Column Layout</h1>
<div class="grid-container layout1">
    <div class="grid-item area1">Area 1</div>
    <div class="grid-item area2">Area 2</div>
    <div class="grid-item area3">Area 3</div>
</div>

Notice:

• In the HTML, there is nothing indicating where the three areas will go. We just fill in the content here. The order of the areas doesn't matter
• Each of these <div>s have been assigned two classes, such as:
  • grid-container AND layout1
  • grid-item area3 AND area1

In the CSS

Here's a couple examples of specifying how the areas will be laid out:

.layout2 {
    grid-template-areas:
        'area1 area2 area3'
        'area4 area5 area6';
}

.layout3 {
    grid-template-areas:
        'area1 area1 area1 area1'
        'area2 area3 area3 area4'
        'area5 area5 area5 area5';
}

Notice, in .layout3 above, we specify some layers more than once. This can be used to make the layers span multiple rows or columns.

Your Task

The files provided to you include three examples of layouts. Add two more:

• In your first layout, use each of your areas only once.
• In your second layout, use some areas multiple times to that they span multiple rows or columns.

In both cases, you can use less than six layers if you'd like.