1. Introduction

This tutorial aims to guide you on how to combine CSS Grid and Flexbox to create responsive layouts. By the end, you'll understand how these two powerful layout systems can work together to provide you with greater control and flexibility.

You will learn:
- The basics of CSS Grid and Flexbox
- How to combine CSS Grid and Flexbox to create complex layouts
- Best practices for creating responsive layouts with CSS Grid and Flexbox

Prerequisites:
- Basic knowledge of HTML and CSS

2. Step-by-Step Guide

CSS Grid

CSS Grid is a two-dimensional layout system that allows you to control layout on both rows and columns.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

In this example, .container is a grid container with three equal-width columns and a 10px gap between grid cells.

Flexbox

Flexbox, on the other hand, is a one-dimensional layout system best suited for distributing items along a row or column.

.container {
  display: flex;
  justify-content: space-between;
}

Here, .container is a flex container and its items are distributed evenly along the row.

Combining CSS Grid and Flexbox

For complex layouts, you can nest Flexbox within a Grid layout. This way, you can use Grid for the main layout structure and Flexbox for the components within.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

In this example, .grid-container creates a three-column grid layout, and .flex-container is used within each grid cell to align its items.

3. Code Examples

Example 1:

<!-- HTML -->
<div class="grid-container">
  <div class="flex-container">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
  </div>
</div>

/* CSS */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

This example creates a three-column grid layout with evenly distributed items in each cell.

4. Summary

We've covered the basics of CSS Grid and Flexbox, and how to combine them for complex layouts. You've learned how to use Grid for the main layout structure and Flexbox for alignment within each grid cell.

Next steps:
- Practice creating layouts with Grid and Flexbox
- Learn about other CSS layout techniques

Additional resources:
- CSS Grid Guide
- Flexbox Guide

5. Practice Exercises

Exercise 1: Create a two-column grid layout with three items evenly distributed in the first column.

Solution:

<!-- HTML -->
<div class="grid-container">
  <div class="flex-container">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
  </div>
  <div>Column 2</div>
</div>

/* CSS */
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

In this example, the .grid-container is a two-column grid layout and the .flex-container in the first column has three evenly distributed items.

Exercise 2: Create a three-row grid layout with a center-aligned item in the first row.

Solution:

<!-- HTML -->
<div class="grid-container">
  <div class="flex-container">
    <p>Centered Item</p>
  </div>
</div>

/* CSS */
.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
}

.flex-container {
  display: flex;
  justify-content: center;
}

In this example, the .grid-container is a three-row grid layout and the .flex-container in the first row has a center-aligned item.