Высота строки сетки CSS

У меня есть сетка, которая заполняется API в цикле. У меня есть 4 строки по 5 элементов. Мне удалось правильно настроить ширину столбцов, но я борюсь с настройкой высоты отдельных столбцов.

Я хотел бы, чтобы 3-й элемент каждой строки занимал 2 строки по высоте, а все остальные - только одну.

Вот что у меня есть для HTML/CSS:

.feedContain {
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 1fr)) minmax(auto, 2fr) repeat(2, minmax(auto, 1fr));
  grid-template-rows: auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.feedContain .news-item {
  min-height: 100px;
  background-color: #cccccc;
}
<div class="feedContain">
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
</div>

Все элементы имеют класс .news-item.

Должно быть 4 строки, но центральные элементы (их должно быть только 2) должны занимать 2 строки каждый.

Есть ли способ сделать это?


css css-grid
person JoethaCoder    schedule 27.08.2018    source источник
comment
Пожалуйста, обновите свое сообщение соответствующим HTML-кодом, чтобы нам было легче вам помочь.   -  person Adam Chubbuck    schedule 27.08.2018
comment
Сделанный. В основном сетка из 18 элементов. Считая слева от каждой строки, 3-й элемент должен быть высотой в 2 строки (по сути, только 2 элемента в этом столбце), а затем 2 - 1 столбцы строки слева и справа от них.   -  person JoethaCoder    schedule 27.08.2018
comment
Вы нашли решение?   -  person Lazar Nikolic    schedule 27.08.2018
comment
Функциональным селектором будет: .news-item:nth-child(5n+3) (демонстрация), к сожалению, я не могу придумать надежный способ чтобы эти элементы имели двойную высоту (без использования display: flex и явной установки высоты, демонстрация ).   -  person David says reinstate Monica    schedule 27.08.2018

Ответы (1)


arrow_upward
0
arrow_downward

Да, кажется, я нашел решение самостоятельно. Вот мое исправление:

.feedContain{
      display: grid;
    grid-template-columns: repeat(2, minmax(auto, 1fr)) minmax(auto, 2fr) repeat(2, minmax(auto, 1fr));
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

.feedContain .news-item{
  min-height: 100px;
  background-color: #cccccc;
}

.socialB .feedContain .news-item:nth-child(3), .socialB .feedContain .news-item:nth-child(8) {
  grid-column: 3/4;
}

.socialB .feedContain .news-item:nth-child(3) {
    grid-row: 1/3;
}

.feedContain .news-item:nth-child(8) {
  grid-row: 3/5;
}
<div class="feedContain">
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
  <div class="news-item"></div>
</div>

Это кажется наименее безумным решением;)

person JoethaCoder    schedule 27.08.2018