The Project | About Us | Contribute | Donations | License

HOME

In this lesson, we will explore how to create responsive layouts using CSS Grid. Responsive design ensures that your web pages look great on all devices, from desktops to tablets to mobile phones. CSS Grid provides a powerful and flexible way to create complex layouts that adapt to different screen sizes.

Key Concepts

Media Queries: Used to apply different styles for different screen sizes.
Grid Template Areas: Define named grid areas that can be rearranged based on screen size.
Auto-Fit and Auto-Fill: Automatically adjust the number of columns or rows based on available space.
Fractional Units (fr): Distribute space proportionally within the grid container.

Practical Example

Let's create a responsive layout with a header, sidebar, main content area, and footer. We'll use CSS Grid to ensure the layout adapts to different screen sizes.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive CSS Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header class="header">Header</header>
        <aside class="sidebar">Sidebar</aside>
        <main class="main">Main Content</main>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

CSS Styles

/* Base styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

.header {
    grid-area: header;
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

.sidebar {
    grid-area: sidebar;
    background-color: #f4f4f4;
    padding: 1rem;
}

.main {
    grid-area: main;
    background-color: #fff;
    padding: 1rem;
}

.footer {
    grid-area: footer;
    background-color: #4CAF50;
    color: white;
    padding: 1rem;
    text-align: center;
}

/* Responsive styles */
@media (max-width: 768px) {
    .container {
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto auto;
    }
}

Explanation

Base Styles:
- We define a grid container with display: grid.
- grid-template-areas specifies the layout of the grid items.
- grid-template-columns and grid-template-rows define the size of the columns and rows.
Responsive Styles:
- We use a media query to change the layout for screens smaller than 768px.
- The grid template areas are rearranged to stack the sidebar below the main content.

Practical Exercise

Create a responsive layout with a header, two columns for content, and a footer. Use CSS Grid to ensure the layout adapts to different screen sizes.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Exercise</title>
    <link rel="stylesheet" href="exercise.css">
</head>
<body>
    <div class="grid-container">
        <header class="header">Header</header>
        <section class="content1">Content 1</section>
        <section class="content2">Content 2</section>
        <footer class="footer">Footer</footer>
    </div>
</body>
</html>

CSS Styles

/* Base styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "content1 content2"
        "footer footer";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

.header {
    grid-area: header;
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

.content1 {
    grid-area: content1;
    background-color: #f4f4f4;
    padding: 1rem;
}

.content2 {
    grid-area: content2;
    background-color: #ddd;
    padding: 1rem;
}

.footer {
    grid-area: footer;
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

/* Responsive styles */
@media (max-width: 768px) {
    .grid-container {
        grid-template-areas: 
            "header"
            "content1"
            "content2"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 1fr auto;
    }
}

Solution Explanation

Base Styles:
- The grid container is defined with display: grid.
- grid-template-areas specifies the layout with two columns for content.
- grid-template-columns and grid-template-rows define the size of the columns and rows.
Responsive Styles:
- The media query changes the layout for screens smaller than 768px.
- The grid template areas are rearranged to stack the content sections vertically.

Summary

In this lesson, we learned how to create responsive layouts using CSS Grid. We covered:

The use of media queries to apply different styles for different screen sizes.
How to define and rearrange grid template areas.
The use of auto-fit and auto-fill to adjust the number of columns or rows.
Practical examples and exercises to reinforce the concepts.

By mastering these techniques, you can create flexible and responsive web layouts that look great on any device.

Responsive Design with CSS Grid

Key Concepts

Practical Example

HTML Structure

CSS Styles

Explanation

Practical Exercise

HTML Structure

CSS Styles

Solution Explanation

Summary

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website