CSS Grid and Flexbox

Chapter 18: CSS Grid and Flexbox

18.1 What are CSS Grid and Flexbox?

CSS Grid and Flexbox are modern layout techniques that simplify creating responsive, dynamic, and complex designs.

18.2 CSS Grid Basics

Example of CSS Grid:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.grid-item {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
}
            

18.3 Flexbox Basics

Example of Flexbox:

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-item {
    background-color: #28a745;
    color: white;
    padding: 10px;
    margin: 5px;
}
            

18.4 Summary

In this chapter, you learned about CSS Grid and Flexbox, essential for modern web layouts. In the next chapter, we will discuss advanced layout techniques using both Grid and Flexbox.

Written by Mahedi Hasan Rafsun | WebLearner Pro