Make a grid element span to the full width of the parent

sgvugaurav

GAURAV KUMAR

Posted on June 27, 2024

Make a grid element span to the full width of the parent

No buildup. Let's get to the point.

You have a grid container, and it has some child elements divided into as many columns as you want. For now, let's say the grid container has seven elements, and those elements are divided into three columns. You want the seventh element to take up the full width of the parent.

Here's the code snippet.

.seven {
    grid-column: 1 / span 3;
}
Enter fullscreen mode Exit fullscreen mode

Checkout a full example here: https://codepen.io/ccgaejza-the-selector/pen/dyELmRE

💖 💪 🙅 🚩
sgvugaurav
GAURAV KUMAR

Posted on June 27, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related