Ширина блока 100vw, выравнивание по центру

Question

main {
    display: grid;
    grid-template-rows: max-content max-content 1fr;
    grid-template-columns: min(100px, 70%) min(50px, calc(30% - 10px));
    gap: 10px;
    padding: 10px;
    justify-content: center;
    align-items: start;
}
.box1 {
   width: 100vw;
   grid-column: 1 / -1;
   background: tan;
}
.box2 {
   grid-area: 2 /1;
   background: beige;
}
.box3 {
   grid-area: 2 / 2 / -1;
   background: gray;
}

<main>
    <div class="box1">Блок 1</div>
    <div class="box2">Блок 2</div>
    <div class="box3">Блок 3<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
</main>

Блоки выравнены по центру, но первому блоку присвоено свойство 100vw. Как сделать так, чтобы выравнивание по центру не распространялось на 1 болок. Чтобы первый элемент занял всю ширину экрана, начиная от левого края?

Главное не меняя структуру html

Answer 1

Может так

.box1 {
  justify-self: stretch;
}

БЛОГ НА HUSL

Ширина блока 100vw, выравнивание по центру

Ответы (1 шт):