main {
display: grid;
padding: 10px 0 10px 10px;
grid-template: 1fr/repeat(6, 1fr);
grid-template-areas: "a a a b b b";
grid-auto-columns: 2fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
main .a {
grid-area: a;
}
main .b {
grid-area: b;
}
.cat {
height: 150px;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
background-color: green;
color: #fff;
}
.cat:hover {
background-color: #004800;
}
<main>
<div class="cat a"></div>
<div class="cat b"></div>
<div class="cat c"></div>
<div class="cat d"></div>
<div class="cat e"></div>
<div class="cat f"></div>
<div class="cat g"></div>
<div class="cat h"></div>
<div class="cat i"></div>
</main>
Как сделать так, чтобы после первой строки остальные элементы занимали не 1/6, а 1/3?
Без использования вложенных элементов.
Количество элементов после первой строки может быть абсолютно любым, поэтому я хочу использовать автоматическое присвоение ширины, но свойство grid-auto-columns: 2fr;
не дает результатов.