Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can grid-row-gap / grip-column-gap be overridden for a single gutter?

Tags:

css

css-grid

Is there a way to set a single grid-row-gap to specific size that is different from the rest of the grid?

Use case: the top row of the grid should have less of a gap to the second row than the rest of the grid as it acts as a header.

like image 436
Eric R Avatar asked Jul 17 '17 19:07

Eric R


1 Answers

The grid-row-gap and grid-column-gap properties apply to the entire grid (spec reference).

However, you can use negative margins on the second row grid items to adjust their position.

Another option would be to remove the top row (headers) from the current grid and place it in a different container directly above the data. This would eliminate the grid-gap problem.

like image 52
Michael Benjamin Avatar answered Oct 21 '22 20:10

Michael Benjamin