# Stay on the Grid Lab

# Introduction

CSS Grid is a powerful layout system which allows for the control and placement of items into columns and rows

# Objective

For this lab, you recreate the different layouts using the required CSS Grid techniques.

# Requirements

The following instructions explain the different changes that need to be made to the site.

1. Download the Stay on the Grid Starter Files. Add the appropriate CSS to the style.css file to make the changes to the web page. No changes should be made to the index.html or base.css file.
2. For Part 1, create a grid 12 columns and 6 rows using the grid-template-columns and grid-template-rows properties. Then recreate the Part 1 Layout using grid-column and grid-row properties (see image below). Do NOT use grid-template-areas.
3. For Part 2 create a grid 6 columns and 6 rows. Then recreate the Part 2 Layout using the grid-template-areas and grid-area properties (see image below).
4. For Part 3, create a grid 6 columns and 2 rows. Then recreate the Part 3 Layout (see image below).
5. For Part 4, create a completely responsive grid where each grid item will be no smaller than 250px (see images below). Do NOT use media queries.
6. For Part 5, recreate the Part 5 Layout using nested grids (see image below).
7. Once completed, submit the style.css file to the Stay on the Grid assignment on BrightSpace.

# Part 1 Layout

# Part 2 Layout

# Part 3 Layout

# Part 4 Layout

# Part 5 Layout