Контейнер с сеткой и сеткой

Question

Здравствуйте. Я пытаюсь создать контейнерную сетку с областями сетки для достижения этой цели:

Но у меня возникают трудности при определении районы отца и детей.

.grid_layout {
  display: grid;
  grid-template-areas:
    "a b c"
    "a d e";
  grid-gap: 6px;
  grid-template-columns: 1fr fr 1fr;
  height: 100%;
}

<div className="grid_layout">
  <div className="a" />
  <div className="b" />
  <div className="c" />
</div>


    
  

Answer 1

если вы хотите использовать области, вам все равно нужно ретранслировать 6 столбцов, как указано в комментариях.

.grid_layout {
  display: grid;
  grid-template-areas:
    "a a  b b  c c "
    "d e  f g  h i";
    /*grid-template-columns:repeat(6,1fr); if you need this */
  grid-gap: 6px;
  height: 100%;/* 100% of what here ?  parent has no height set*/
  grid-auto-flow:row dense
}
img {width:100%;/* of the grid cell defined */}

img:nth-child(1) {
grid-area:a ;
}
img:nth-child(2) {
grid-area:b;
}
img:nth-child(3) {
grid-area:c;
}
img:nth-child(4) {
grid-area:d;
}
img:nth-child(5) {
grid-area:e;
}
img:nth-child(6) {
grid-area:f;
}
img:nth-child(7) {
grid-area:g;
}
img:nth-child(8) {
grid-area:h;
}
img:nth-child(9) {
grid-area:i;
}

<div class="grid_layout">
<img src="http://dummyimage.com/300x150/456">
<img src="http://dummyimage.com/300x150/789">
<img src="http://dummyimage.com/300x150/029">
<img src="http://dummyimage.com/300x150/fa0">
<img src="http://dummyimage.com/300x150/bad">
<img src="http://dummyimage.com/300x150/g0d">
<img src="http://dummyimage.com/300x150/f00">
<img src="http://dummyimage.com/300x150/555">
<img src="http://dummyimage.com/300x150/0af">
</div>

Для повторяющегося шаблона, grid-template-areas не в лучшем случае, но grid-template-columns будет лучше помочь с grid-auto-flow:row dense;, когда текст будет охватывать 2 столбца.

возможный пример:

.grid_layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 6px;
  height: 100%;
  /* 100% of what here ?  parent has no height set*/
  grid-auto-flow: row dense;
}

p {
  border: solid;
  margin: 0;
}

img {
  width: 100%;
}

.a {
  grid-column: 1 / span 2;
  text-align: center;
}

.b {
  grid-column: 3 / span 2;
  text-align: center;
}

.c {
  grid-column: 5 / span 2;
  text-align: center;
}

div {
  counter-reset: ps
}

p:before {
  counter-increment: ps;
  content: 'N°'counter(ps)' - ';
}

<div class="grid_layout">
  <img class="a" src="http://dummyimage.com/300x150/456">
  <p class="a">some text</p>
  <img class="b" src="http://dummyimage.com/300x150/789">
  <p class="b">some text</p>
  <img class="c" src="http://dummyimage.com/300x150/029">
  <p class="c">some text</p>
  <img src="http://dummyimage.com/300x150/fa0">
  <img src="http://dummyimage.com/300x150/bad">
  <p class="a">some text</p>
  <img src="http://dummyimage.com/300x150/g0d">
  <img src="http://dummyimage.com/300x150/f00">
  <p class="b">some text</p>
  <img src="http://dummyimage.com/300x150/555">
  <img src="http://dummyimage.com/300x150/0af">
  <p class="c">some text</p>
</div>

Answer 2

Вам не нужны области шаблона для выполнения sh этого ... но вам нужны шесть столбцов.

.grid_layout {
  display: grid;
  grid-gap: 6px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  width: 80%;
  margin: 1em auto;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  background: lightgreen;
  border: 1px solid green;
  padding: 1em;
}

.item:nth-child(1),
.item:nth-child(2),
.item:nth-child(3) {
  grid-column: span 2;
}

<div class="grid_layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>