CSS Grid - Дизайн не равных высот на определенных div - PullRequest
Новая
       5

CSS Grid - Дизайн не равных высот на определенных div

1 голос
/ 28 января 2020

У меня есть сетка CSS, но я изо всех сил стараюсь подогнать макет.

Как вы можете видеть ниже, все правильно, однако я хочу, чтобы «Item 1» и «Item 6» были одинаковой высоты, поэтому все работает плавно. 

 .grid > div {background:red;border:2px solid blue;}
 .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
  }
  .span-col-4{grid-column: span 4 / auto;}
  .span-row-2{grid-row: span 2 / auto;}
  .span-row-4{grid-row: span 4 / auto;}
<div class="grid">
  <div class="span-row-2">Item 1</div>
  <div class="span-row-4">Item 2</div>
  <div>Item 3</div>
  <div class="span-row-4">Item 4</div>
  <div>Item 5</div>
  <div class="span-row-2">Item 6</div>
  <div class="span-row-2">Item 7</div>
  <div class="span-col-4">Item 8</div>
</div>

Спасибо

Ответы [ 2 ]

1 голос
/ 28 января 2020

Рассмотрим больше строк и определите высоту строк, чтобы убедиться, что они остаются равными: 

.grid>div {
  background: red;
  border: 2px solid blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows:1fr;
  grid-gap: 10px;
}

.span-col-4 {
  grid-column: span 4;
}

.span-row-2 { grid-row: span 2;}
.span-row-3 { grid-row: span 3;}
.span-row-4 { grid-row: span 4;}
.span-row-5 { grid-row: span 5;}
.span-row-6 { grid-row: span 6;}
<div class="grid">
  <div class="span-row-3">Item 1</div>
  <div class="span-row-6">Item 2</div>
  <div class="span-row-2">Item 3</div>
  <div class="span-row-6">Item 4</div>
  <div class="span-row-2">Item 5</div>
  <div class="span-row-3">Item 6</div>
  <div class="span-row-2">Item 7</div>
  <div class="span-col-4 span-row-2">Item 8</div>
</div>
1 голос
/ 28 января 2020

Вы можете применить минимальную высоту css 

.span-row-2 {
    grid-row: span 2 / auto;
    min-height: 46px;
}

Высота «Элемент 1» и «Элемент 6» будет одинаковой, но убедитесь, что везде, где вы применяете span-row-2, высота будет применяется. Лучше использовать другое имя класса.

...