Grid layout span full width

Span an item full width in a grid layout in CSS

when need an item to stretch horizontally across the entire grid without knowing the total number of columns in the grid use this:

grid-column: 1 / -1;

this rule instructs the grid item to start from the first column and span all the way to the last column of the grid, taking up the entire width of the grid container.

1: Starting column for the grid item. -1: Ending column for the grid item (in this context, it represents the last column).