Menu
CSS

Flexbox and Grid for Responsive Design

Flexbox and Grid are powerful CSS layout modules that help you create responsive designs with ease. They provide flexible and efficient ways to distribute space and align items within a container.

 

1. Flexbox

Flexbox (Flexible Box Layout) is designed for one-dimensional layouts. It excels at aligning items in a row or a column and distributing space within a container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            background-color: lightgray;
            padding: 10px;
        }

        .box {
            flex: 1 1 200px; /* Grow, shrink, basis */
            margin: 10px;
            padding: 20px;
            background-color: lightcoral;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
    </div>
</body>
</html>

CSS Explanation:

  • .container uses display: flex to activate flexbox layout.
  • flex-wrap: wrap allows items to wrap onto multiple lines.
  • justify-content: space-between evenly distributes space between items.
  • .box uses flex: 1 1 200px to make each box flexible with a minimum size of 200px.

 

2. CSS Grid

Grid Layout is designed for two-dimensional layouts, providing control over both rows and columns. It’s perfect for creating complex layouts with precise positioning.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Example</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            background-color: lightgray;
            padding: 10px;
        }

        .grid-item {
            padding: 20px;
            background-color: lightgreen;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
    </div>
</body>
</html>

CSS Explanation:

  • .grid-container uses display: grid to activate grid layout.
  • grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) creates a responsive grid with columns that have a minimum width of 200px and a flexible maximum width.
  • gap: 10px adds spacing between grid items.
  • .grid-item styles each grid item.

 

Difference Between  Flexbox and Grid

  • Flexbox: Best for simpler, one-dimensional layouts where you need to align items along a single axis (row or column).
  • Grid: Best for complex, two-dimensional layouts where you need precise control over both rows and columns.

 

Example 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codersmile Responsive Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Codersmile</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main class="grid-container">
        <section class="grid-item" id="home">
            <h2>Home</h2>
            <p>Welcome to Codersmile, your go-to resource for coding tips and tutorials.</p>
        </section>
        <section class="grid-item" id="about">
            <h2>About Us</h2>
            <p>At Codersmile, we are dedicated to helping you learn and grow as a developer.</p>
        </section>
        <section class="grid-item" id="services">
            <h2>Our Services</h2>
            <p>We offer a variety of services to help you succeed in your coding journey.</p>
        </section>
        <section class="grid-item" id="contact">
            <h2>Contact Us</h2>
            <p>Get in touch with us to learn more about how we can help you.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Codersmile. All rights reserved.</p>
    </footer>
</body>
</html>
<style>
/* Basic styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}

header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 10px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

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

/* Grid items */
.grid-item {
    background-color: lightgreen;
    padding: 20px;
    text-align: center;
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Flexbox for navigation */
header nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
</style>

 

CSS