So I am working on my CSS library, Spark, and I am trying to demonstrate the grid-layout capabilities ov it...
... However, I am displeased by the disproportionate amount ov whitespace between each column, and I don't know what is causing it.
I've tried setting both gap
and grid-gap
to 0
and have made sure that there are no margins and no padding on the grid, or the grid-items.
The CSS for (that applies to*) the highlighted grid boils down to this:
* {
box-sizing:border-box;
max-height:100%;
max-width:100%;
height:fit-content;
}
*[data-flow~="grid"] {
grid-template-columns:repeat(2, 1fr);
grid-template-rows:repeat(1, 1fr);
grid-auto-columns:1fr;
grid-auto-rows:1fr;
display:grid;
}
*[data-flow~="row"] {
grid-auto-flow:row;
}
*[data-padding="char"] { padding:1em; }
.box-container {
background-color:red;
width:100%;
}
.box-container[data-flow~="grid"] { gap:1em; }
The weird thing is is that when I change the flow to columns, the spacing looks as it should:
So... what's going on here? (Why does spacing work properly between rows and not columns?)
How can I fix this behavior?
Top comments (0)