Grid in Html

What Is CSS Grid?

CSS Grid is a two-dimensional layout system that allows developers to arrange elements into rows and columns. Unlike Flexbox, which is primarily designed for one-dimensional layouts Grid can manage both dimensions simultaneously.

why we use grid?
CSS Grid is a powerful layout system that makes it easy to create modern, responsive web page designs. It allows developers to arrange elements in both rows and columns, making complex layouts simpler to build and manage. Compared to older layout techniques, CSS Grid requires less code, provides better control over element placement, and adapts easily to different screen sizes. Because of its flexibility, clean structure, and wide browser support, CSS Grid has become an essential tool for building responsive and professional websites.

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <div class="box">Item 5</div>
    <div class="box">Item 6</div>
</div>
CSS
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

Enter fullscreen mode Exit fullscreen mode

For example output

| 1 | 2 | 3 |

| 4 | 5 | 6 |

Conclusion

CSS Grid has transformed the way developers build web layouts. Its powerful two-dimensional capabilities make creating responsive, organized, and visually appealing designs much simpler than older methods. By mastering Grid, you’ll be able to create everything from simple portfolios to sophisticated dashboards with clean, maintainable code.