How to span the CSS-GRID Gap?

Question

css-grid column-gap property makes it easy to create space between elements. However, it's not so easy to overlay elements and target the edge of the gap. With a 12 column Grid with 16px gaps between the columns and 16px columns on the edges my solution is to have 26 columns, like this:

.wrapper {
grid-template-columns: repeat(12, 16px 1fr) 16px ;
}

Then, if you want to target the gap edge (see images), you can use normal grid-column spacing, you only must keep in mind you have now 26 columns.

div {
grid-column: 1/3;
background-color:blue;
}

Of course the grid-gap, gap, or column-gap property should simplify this, only it doesn't. Using column gaps instead of columns you can't target the edge of the gap unless you enlarge the overlaid div beyond 100% of the columns containing it.

Here are three images to explain what I mean:

Image 1:

In the image above is a blue div overlaying column 1 of a 12 column layout with 16px gap.

.wrapper {
grid-template-columns: repeat(12, 1fr);
column-gap:16px;
}

.div-1 {grid-column:1; background-color:pink;}
.div-2 {grid-column:2; background-color:pink;}
etc..

.div-overlay {grid-column: 1/2; background-color:blue;}

Image 2:

In the second image above everything is the same except the blue div overlaying the pink 12 column grid spans to the third column instead of the second (it looks like the end of the second column, because it's before the first gap, but actually the first gap is included in the third column and line number three is the start of the third column).


.div-overlay {grid-column: 1/3; background-color:blue;}

Image three:

In the third image, above, if you want to target the start of the second column and the end of the first gap, you need to change the width of the overlaying blue div, you can't use the grid-column property with spans to get it done.

.div-overlay{
grid-column:1/2;
width:111%;
background-color:blue;
}

One would think with gap, column-gap, and grid-gap properties you would be able to span just the gap using a key word such as in this ficticious example:

.div-overlay{
grid-column:  col 1 / span gap 1;
background-color:blue;
}

Am I missing something, or should I stick with 26 column grids to get it done?

How to span the CSS-GRID Gap?

0 Answers