Как создать блок макета CSS Grid, охватывающий 2 столбца и 2 строки? ⇐ CSS

[Anonymous]

Я создал макет сетки в соответствии с новейшей спецификацией CSS Grid, но еще не полностью с ней знаком. Я пытаюсь создать следующий макет без необходимости определять области сетки для каждого дочернего элемента сетки.

codepen


body {
max-width: 1024px;
margin: 10px auto;
}

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b" "a a c" "d e f";
}

.grid__thing {
background-color: rebeccapurple;
}

.a {
grid-area: a;
}

.b {
grid-area: b;
}

.c {
grid-area: c;
}

.d {
grid-area: d;
}

.e {
grid-area: e;
}

.f {
grid-area: f;
}

img {
width: 100%;
height: 100%;
object-fit: cover;
}


















В идеале я бы хотел иметь возможность устанавливать все свойства размера сетки в родительском элементе сетки, а затем ТОЛЬКО определите свойства в элементе сетки A, чтобы охватить два столбца и строки.

В настоящее время указывается каждая область сетки и прикрепляется уникальный класс следующим образом:

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b"
"a a c"
"d e f";
.a {
grid-area: a;
}
.b {
grid-area: b;
}
.c {
grid-area: c;
}
.d {
grid-area: d;
}
.e {
grid-area: e;
}
.f {
grid-area: f;
}


Хотелось бы сделать что-то подобное, чтобы не создавать уникальный класс CSS для каждого элемента сетки:

.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "a a b"
"a a c"
"d e f";
}
.a {
// The only unique selector, so this is the only thing that
// should be given unique styling
}


Подробнее здесь: https://stackoverflow.com/questions/444 ... and-2-rows