Добавление текста под каждым столбцом 4X4 с использованием CSS GRID

Question

Я очень новичок в CSS Grid и пытаюсь создать сетку 2 X 2. Я могу создать четыре div изображения (2 в каждой строке и 2 в каждом столбце), но я хочу, чтобы текст отображался под каждым. Я попытался использовать свойство grid-template-Area, но весь текст просто отображается под одним div все перекрывается.

Любая помощь будет оценена, пожалуйста.

.image {
  width: 526px;
  height: 360px;
  border: 1px solid #000;
  border-radius: 10px;
  margin-top: 35px;
  margin-bottom: 35px;
}

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 1em;
  grid-template-areas: "image image " "text text";
}

.text {
  grid-area: text;
}

<div class="banner">
  <div class="wrapper">
    <div class="grid-container">
      <div class="image"></div>
      <p class="text">TEXT 1</p>
      <div class="image"></div>
      <p class="text">
        TEXT 2
      </p>
      <div class="image"></div>
      <p class="text">TEXT 3</p>
      <div class="image"></div>
      <p class="text">TEXT 4</p>
    </div>
  </div>
  <!-- wrapper -->

</div>
<!-- banner -->

css css-grid

1

Pranita Gandhi 1 Июн 2020 в 14:07

Answer 1

Вы можете использовать nth-child() для правильного размещения ваших элементов вместо области сетки:

.image {
  width: 200px;
  height: 150px;
  border: 1px solid #000;
  border-radius: 10px;
  margin-top: 35px;
  margin-bottom: 35px;
}

.grid-container {
  display: grid;
  grid-auto-flow: dense; /* this one is important to fill all the cells */
  grid-auto-columns: 1fr;
  column-gap: 10px;
}

.image:nth-child(4n + 3) {
  grid-column: 2;
}

.text:nth-child(4n + 2) {
  grid-column: 1;
}

<div class="banner">
  <div class="wrapper">
    <div class="grid-container">
      <div class="image"></div>
      <p class="text">TEXT 1</p>
      <div class="image"></div>
      <p class="text">TEXT 2</p>
      <div class="image"></div>
      <p class="text">TEXT 3</p>
      <div class="image"></div>
      <p class="text">TEXT 4</p>
    </div>
  </div>
</div>

Это будет работать, даже если вы добавите больше изображения / текста:

.image {
  width: 200px;
  height: 150px;
  border: 1px solid #000;
  border-radius: 10px;
  margin-top: 35px;
  margin-bottom: 35px;
}

.grid-container {
  display: grid;
  grid-auto-flow: dense; /* this one is important to fill all the cells */
  grid-auto-columns: 1fr;
  column-gap: 10px;
}

.image:nth-child(4n + 3) {
  grid-column: 2;
}

.text:nth-child(4n + 2) {
  grid-column: 1;
}

<div class="banner">
  <div class="wrapper">
    <div class="grid-container">
      <div class="image"></div>
      <p class="text">TEXT 1</p>
      <div class="image"></div>
      <p class="text">TEXT 2</p>
      <div class="image"></div>
      <p class="text">TEXT 3</p>
      <div class="image"></div>
      <p class="text">TEXT 4</p>
      <div class="image"></div>
      <p class="text">TEXT 5</p>
      <div class="image"></div>
      <p class="text">TEXT 6</p>
      <div class="image"></div>
      <p class="text">TEXT 7</p>
      <div class="image"></div>
      <p class="text">TEXT 8</p>
    </div>
  </div>
</div>

1

Temani Afif 1 Июн 2020 в 11:15

Answer 2

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

.image {
  width: 526px;
  height: 360px;
  border: 1px solid #000;
  border-radius: 10px;
  margin-top: 35px;
  margin-bottom: 35px;
  /*grid-area: image;*/
}

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 1em;
  /* grid-template-areas: "image image" "text text"; */
}

.text {
  text-align: center; /* Aligning the text to center */
  /* grid-area: text;*/
}

<div class="banner">
  <div class="wrapper">
    <div class="grid-container">
      <div class="image"></div>      
      <div class="image"></div>
      <p class="text">TEXT 1</p>
      <p class="text">TEXT 2</p>
      <div class="image"></div>
      <div class="image"></div>
      <p class="text">TEXT 3</p>
      <p class="text">TEXT 4</p>
    </div>
  </div>
  <!-- wrapper -->

</div>
<!-- banner -->

-1

yinsweet 1 Июн 2020 в 11:22

Answer 3

Управляйте размещением без областей шаблона, используя nth-of-type и проходите через столбцы.

.image {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  border-radius: 10px;
  margin-top: 35px;
  margin-bottom: 35px;
}

.grid-container {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 1em;
  grid-auto-flow: column;
}

p:nth-of-type(odd),
.image:nth-of-type(odd) {
  grid-column: 1;
}

p:nth-of-type(even),
.image:nth-of-type(even) {
  grid-column: 2;
}

<div class="banner">
  <div class="wrapper">
    <div class="grid-container">
      <div class="image"></div>
      <p class="text">TEXT 1</p>
      <div class="image"></div>
      <p class="text">
        TEXT 2
      </p>
      <div class="image"></div>
      <p class="text">TEXT 3</p>
      <div class="image"></div>
      <p class="text">TEXT 4</p>
    </div>
  </div>
  <!-- wrapper -->

</div>
<!-- banner -->

0

Paulie_D 1 Июн 2020 в 11:17

Добавление текста под каждым столбцом 4X4 с использованием CSS GRID

3 ответа

Новые вопросы

css