Lecture 15: CSS Grid – Building Complex Layouts with Ease

In this lecture, we’re diving into CSS Grid, a powerful layout system that gives you total control over both rows and columns. While Flexbox is great for one-dimensional layouts (either rows or columns), Grid allows you to handle two-dimensional layouts, meaning you can design entire web page layouts with precision.

1. What is CSS Grid?

CSS Grid Layout, commonly known as Grid, is a 2D layout system designed to manage both rows and columns simultaneously. You can think of it as a matrix or a spreadsheet where each element is placed into grid cells, allowing for clean and organized layouts.

2. How to Create a Grid

To start using Grid, you’ll need to define a container as a grid by setting display: grid. Then, you’ll define the number of rows and columns using the grid-template-rows and grid-template-columns properties.

Example:

<div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

This creates a 2x2 grid, with each cell being 100px by 100px and a 10px gap between the cells.

3. Defining Grid Areas

You can also define specific grid areas for items to occupy using the grid-area property. This allows you to control exactly where an item will be placed within the grid.

Example:

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

This example creates a basic layout where the header and footer span across two columns, and the sidebar and main content occupy their own columns. The grid-template-areas property allows you to define the structure of the grid with names for each area.

4. Auto-Fit and Auto-Fill for Responsive Grids

One of the best parts about CSS Grid is how easy it is to make it responsive. The auto-fit and auto-fill properties can automatically adjust the number of columns based on the available space.

Example:

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

In this example, the grid will automatically create as many columns as fit within the container, with each column being at least 150px wide. If there’s extra space, the columns will stretch to fill the remaining area.

5. Grid Alignment

You can align items inside the grid using justify-items and align-items.

justify-items: Aligns items horizontally within their grid cells.
align-items: Aligns items vertically within their grid cells.

Example:

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

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

This will center all the items both horizontally and vertically within their grid cells.

6. Nested Grids

CSS Grid also supports nested grids, allowing you to create grids inside grid items for more complex layouts.

Example:

<div class="grid-container">
    <div class="item">
        <div class="nested-grid">
            <div class="nested-item">Nested 1</div>
            <div class="nested-item">Nested 2</div>
        </div>
    </div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

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

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

In this example, one of the grid items contains a nested grid, allowing for more flexible and detailed layouts.

7. Grid vs. Flexbox: When to Use Each

Use Flexbox when you need to manage the layout of items in one direction (either rows or columns).
Use Grid when you need to manage both rows and columns simultaneously for complex, multi-dimensional layouts.

Conclusion

CSS Grid is a game-changer for web design, offering a powerful way to build complex and responsive layouts with minimal effort. Whether you’re working on a blog layout, a dashboard, or a website structure, Grid gives you the flexibility to control both rows and columns with ease.

follow me on LinkedIn

Ridoy Hasan