I am trying to display the 3 last elements of a container in an horizontal line. The first 2 taking up a fixed space and the last element taking all columns left.
I'm trying to achieve this result with a CSS Grid.
So far I've been able to do a working prototype when the grid is full (more than 3 elements).
But as you can see in the snippet below, if there's less than 3 elements, the last column end at the right at the grid but leaves a gap in the grid.
I have tried with specifying grid-column: auto / -1; instead of grid-column-end with no luck.
I am using Chrome but tested it on Firefox as well
What might cause this gap and is there a good way to fix it using only CSS ?
EDIT : Completed the scenario and added expected result
.demo {
max-width: 500px;
background-color: #abcdef;
border-radius: 3px;
padding: 5px;
margin-bottom: 5px;
}
.demo>.demo {
background-color: #fedcba;
}
.main {
display: grid;
grid-template-columns: repeat(2, 100px) 1fr;
grid-gap: 1px;
}
.main>.column:last-child {
grid-column-end: -1;
}
.main>.column:nth-last-child(n+4) {
display: none;
}<div class="demo main">
<div class="demo column">1</div>
<div class="demo column">2</div>
<div class="demo column">3</div>
<div class="demo column">4</div>
</div>
<div class="demo main">
<div class="demo column">1</div>
<div class="demo column">2</div>
<div class="demo column">3</div>
</div>
<div class="demo main">
<div class="demo column">1</div>
<div class="demo column">2</div>
</div>
<div class="demo main">
<div class="demo column">1</div>
</div>Excpected result :
