Как правильно задавать последнюю позицию колонке в ряду, если grid-column-start: -1;
создает дополнительную (6) колонку с минимальной шириной?
Получилось выполнить задачу через grid-column-start: -2;
, но насколько это правильно?
.wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 100px;
}
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > :nth-child(1)
{
background: blue;
grid-column-start: -1;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.nested {
border: 2px solid #ffec99;
border-radius: 5px;
background-color: #fff9db;
padding: 1em;
}
<div class="wrapper">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box1">6</div>
<div class="box2">7</div>
<div class="box3">8</div>
<div class="box4">9</div>
<div class="box5">10</div>
</div>