Как добиться одинаковой ширины для определеных блоков в гриде?

Question

[vlados096zver]

test__cell--left и test__cell--wide - сейчас между ними 10px разница
https://jsbin.com/diyavumaco/1/edit?html,output

Comments

[Froggyweb]

в гриде все красиво и одинаково. просто у тебя элементы обернуты в .test а как ведут себя эти блоки по отношению друг к другу правил нет. только внутри. обертка тест - избыточная. ну и разметка после body :)

Answer 1

[Антон Антон]

это из-за gap

.test {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "left left top-a top-b"
    "left left bottom bottom";
  gap: 10px;
  min-height: 420px;
}