Подсказать в решении проблемы grid

Question

Есть grid меню, в нём несколько элементов. Нужно чтобы первый и последний занимали все 100% по ширине, остальные 1/2(как и сейчас на скринах)

Текущий css:

                display: grid
                width: 100%
                grid-template-columns: repeat(2, 1fr)
                grid-template-rows: repeat(4, 1fr)
                grid-row-gap: resize(12)
                grid-column-gap: resize(15)

Answer 1

.menu {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-template-areas:
    "first first"
    "second third"
    "fourth fifth"
    "sixth seventh"
    "eighth eighth";
   grid-row-gap: resize(12)
   grid-column-gap: resize(15)

Свойством grid-template-areas можно размечать grid с использованием условных названий блоков на странице. Нужно только синтаксически разместить эти имена по колонкам/рядам в соответствии с размерами, указанными в grid-template-rows и grid-template-columns, а затем выдать самим блокам свои названия по примеру:

grid-area: first;

Об этом свойстве лучше почитать в интернете.

Answer 2

Вариант тебе на флексе:

.menu {
    display: flex;
    flex-wrap: wrap;
}
.item {
    width: calc(50% - 5px);
    border: solid 2px red;
    min-height: 200px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.item:nth-child(2n) {
    margin-right: 5px;
}
.item:nth-child(2n+1) {
    margin-left: 5px;
}
.item:first-child, .item:last-child {
    width: 100%;
    margin: 0 0 10px 0;
}

<div class="menu">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

БЛОГ НА HUSL

Подсказать в решении проблемы grid

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