### Problem Statement

You are required to create a Holy Grail Layout using HTML and CSS. The Holy Grail Layout is a classic CSS layout pattern that includes the following sections: a header, a footer, a main content area, and two sidebars. The layout must be responsive, adapting to different screen sizes using CSS Grid.

### Requirements

1. **Structure**:
   - The layout should include the following sections:
     - Header
     - Left Sidebar
     - Main Content
     - Right Sidebar
     - Footer

2. **Grid Layout**:
   - Use CSS Grid to arrange the layout.
   - The header and footer should span the full width of the layout.
   - The left sidebar, main content, and right sidebar should be arranged in three columns.
   - On smaller screens (max-width: 768px), all sections should stack vertically.

3. **Styling**:
   - Apply background colors to differentiate the sections:
     - Header: Red
     - Left Sidebar: Green
     - Main Content: Plum
     - Right Sidebar: Greenyellow
     - Footer: Blue (with white text)

### Example

The layout should look like this:

```
+-------------------------------------------+
|                   Header                  |
+------+------+---------------------+-------+
| Left |      |                     | Right |
| Side | Main |      Main           | Side  |
| bar  |      |      Content        | bar   |
+------+------+---------------------+-------+
|                  Footer                   |
+-------------------------------------------+
```

When viewed on a smaller screen (max-width: 768px), the layout should stack vertically:

```
+-------------------------------------------+
|                   Header                  |
+-------------------------------------------+
|                 Left Sidebar              |
+-------------------------------------------+
|                 Main Content              |
+-------------------------------------------+
|                 Right Sidebar             |
+-------------------------------------------+
|                  Footer                   |
+-------------------------------------------+
```

index.html

styles.css

Holy Grail Layout

### Editorial

Creating a Holy Grail Layout using CSS Grid is a fundamental exercise in mastering responsive web design. The Holy Grail Layout includes a header, a footer, a main content area, and two sidebars. The challenge is to design this layout such that it adapts seamlessly to different screen sizes.

### Approach

1. **HTML Structure**:
    - Define a container `div` with child elements for the header, left sidebar, main content, right sidebar, and footer.

2. **CSS Grid Layout**:
    - Use CSS Grid to define the layout. Set up the grid with three columns for the header and footer to span across all columns, and the sidebars and main content to occupy their respective columns.
    - For smaller screens, use media queries to adjust the grid to a single-column layout, stacking the elements vertically.

3. **Styling**:
    - Apply distinct background colors to each section to visually differentiate them.
    - Ensure the layout is responsive by using appropriate grid properties and media queries.

### Detailed Steps

#### 1. HTML Structure:
Create a container `div` with class `parent` and include child elements for the header, left sidebar, main content, right sidebar, and footer.

#### 2. CSS Grid Layout:
- Define the grid template for the `.parent` class to set up the layout with three columns.
- Use `grid-column` properties to span the header and footer across all columns.
- Position the sidebars and main content in their respective columns.
- Use a media query to adjust the layout for smaller screens (e.g., max-width: 768px), stacking the elements vertically by redefining the grid template.

#### 3. Styling:
- Assign background colors to the header, footer, left sidebar, main content, and right sidebar.
- Ensure proper padding and margin resets for the HTML and body elements.

### Example Layouts

#### Desktop View:
```
+-------------------------------------------+
|                   Header                  |
+------+------+---------------------+-------+
| Left |      |                     | Right |
| Side | Main |      Main           | Side  |
| bar  |      |      Content        | bar   |
+------+------+---------------------+-------+
|                  Footer                   |
+-------------------------------------------+
```

#### Mobile View:
```
+-------------------------------------------+
|                   Header                  |
+-------------------------------------------+
|                 Left Sidebar              |
+-------------------------------------------+
|                 Main Content              |
+-------------------------------------------+
|                 Right Sidebar             |
+-------------------------------------------+
|                  Footer                   |
+-------------------------------------------+
```

### Conclusion

Implementing the Holy Grail Layout using CSS Grid demonstrates the power and flexibility of modern CSS. This layout pattern ensures a responsive design that adapts to various screen sizes, enhancing the user experience across devices.