interview

Home / DeveloperSection / Interviews / Explain CSS Grid and Flexbox with an example

Ask Question
Ravi Vishwakarma

Ravi Vishwakarma

Follow
Hi, my self Ravi Vishwakarma. I have completed my studies at SPICBB Varanasi. now I completed MCA with 76% form Veer Bahadur Singh Purvanchal University Jaunpur. SWE @ MindStick | Software Engineer | Web Developer | .Net Developer | Web Developer | Backend Engineer | .NET Core Developer

Can you answer this question?

Answer

1 Answers

Ravi Vishwakarma

Ravi Vishwakarma

05-Jun-2024

CSS Grid and Flexbox are two powerful layout systems in CSS that allow for the creation of complex and responsive layouts. Each has its own strengths and use cases. Here’s an explanation of both, along with examples to illustrate their usage:

CSS Grid

CSS Grid is a two-dimensional layout system that allows you to create grid-based layouts. It excels at creating complex layouts with rows and columns.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Grid Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="item item1">Item 1</div>
        <div class="item item2">Item 2</div>
        <div class="item item3">Item 3</div>
        <div class="item item4">Item 4</div>
        <div class="item item5">Item 5</div>
        <div class="item item6">Item 6</div>
    </div>
</body>
</html>

CSS (styles.css):

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

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

.item1 { grid-column: span 2; }
.item4 { grid-column: span 3; }

In this example:

  • .grid-container is defined as a grid with 3 equal columns using grid-template-columns: repeat(3, 1fr);.
  • grid-gap is used to set the spacing between grid items.
  • .item1 spans 2 columns, and .item4 spans all 3 columns.

Flexbox

Flexbox is a one-dimensional layout system that is great for distributing space along a single axis (either horizontal or vertical). It is ideal for aligning and distributing items within a container.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flexbox Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flex-container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
    </div>
</body>
</html>

CSS (styles.css):

.flex-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
}

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

In this example:

  • .flex-container is defined as a flex container with display: flex;.
  • justify-content: space-around; distributes the items evenly with space around them.
  • align-items: center; aligns the items vertically in the center of the container.

Comparison and Use Cases

  • CSS Grid is best for creating two-dimensional layouts where both rows and columns are needed. It’s great for complex designs like web page layouts, image galleries, and dashboards.
  • Flexbox is ideal for one-dimensional layouts where items are laid out in a row or column. It’s perfect for navigation bars, toolbars, form layouts, and any situation where you need to align and distribute items along a single axis.

Choosing Between Grid and Flexbox:

  • Use Grid when you need a grid-based layout with control over both rows and columns.
  • Use Flexbox when you need to arrange items in a single line or stack items along a single axis, especially when you need dynamic distribution of space.

In many cases, you might use both CSS Grid and Flexbox together. For instance, you can use Grid for the overall page layout and Flexbox for the alignment and spacing of items within individual grid cells.

Liked By