CSS Grid

1. What is CSS Grid?

CSS Grid Layout is a layout method that allows you to arrange elements in rows and columns. It offers a more efficient way to design responsive layouts compared to traditional CSS methods, like flexbox and floats.

2. Creating a Basic Grid

CSS Grid Layout offers a robust two-dimensional layout system that allows you to design intricate grid-based layouts. With it, you can specify both rows and columns, as well as position items anywhere within the grid.

Edit Copy

.container {
    display: grid;                     /* Activate grid layout */
    grid-template-columns:1fr, 1fr, 1fr; /* Create three equal columns */
    grid-gap: 10px;                   /* Space between grid items */
}

.item {
    height: 200px;                    /* Fixed height for each grid item */
    background-color: lightblue;      /* Item background color */
}

Edit Copy

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

This section illustrates a CSS Grid Layout. The .container uses display: grid to form a grid container. The property grid-template-columns creates three equal-width columns using repeat(3, 1fr), ensuring an even distribution of space. The grid-gap property adds a 10px margin between grid items, while each .item maintains a consistent height and background color.

Version Comparison:

With repeat(): repeat(3, 1fr) — shorter and ideal for many columns.
Without repeat(): 1fr 1fr 1fr — same result but more typing.
Both mean: “Make 3 equal columns.”

7. Conclusion

CSS Grid is an essential tool for modern web development, enabling developers to create complex layouts without the need for extensive code. By mastering CSS Grid, you can significantly improve your web design skills and create responsive, efficient layouts.