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 wa…


This content originally appeared on DEV Community and was authored by GAURAV KUMAR

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;
}

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


This content originally appeared on DEV Community and was authored by GAURAV KUMAR


Print Share Comment Cite Upload Translate Updates
APA

GAURAV KUMAR | Sciencx (2024-06-27T05:05:58+00:00) Make a grid element span to the full width of the parent. Retrieved from https://www.scien.cx/2024/06/27/make-a-grid-element-span-to-the-full-width-of-the-parent/

MLA
" » Make a grid element span to the full width of the parent." GAURAV KUMAR | Sciencx - Thursday June 27, 2024, https://www.scien.cx/2024/06/27/make-a-grid-element-span-to-the-full-width-of-the-parent/
HARVARD
GAURAV KUMAR | Sciencx Thursday June 27, 2024 » Make a grid element span to the full width of the parent., viewed ,<https://www.scien.cx/2024/06/27/make-a-grid-element-span-to-the-full-width-of-the-parent/>
VANCOUVER
GAURAV KUMAR | Sciencx - » Make a grid element span to the full width of the parent. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/27/make-a-grid-element-span-to-the-full-width-of-the-parent/
CHICAGO
" » Make a grid element span to the full width of the parent." GAURAV KUMAR | Sciencx - Accessed . https://www.scien.cx/2024/06/27/make-a-grid-element-span-to-the-full-width-of-the-parent/
IEEE
" » Make a grid element span to the full width of the parent." GAURAV KUMAR | Sciencx [Online]. Available: https://www.scien.cx/2024/06/27/make-a-grid-element-span-to-the-full-width-of-the-parent/. [Accessed: ]
rf:citation
» Make a grid element span to the full width of the parent | GAURAV KUMAR | Sciencx | https://www.scien.cx/2024/06/27/make-a-grid-element-span-to-the-full-width-of-the-parent/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts