it-roy-ru.com

Как заставить элементы CSS Grid занимать оставшееся пространство?

У меня есть карта, построенная с использованием CSS Grid. Может быть изображение слева, текст справа вверху и кнопка или ссылка справа внизу.

В приведенном ниже коде, как я могу сделать так, чтобы зеленая область занимала как можно больше места, и в то же время синяя область должна занимать как можно меньше места?

Зеленый должен вытолкнуть синюю область как можно дальше вниз.

https://jsfiddle.net/9nxpvs5m/

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

13
Jens Törnell

Добавление grid-template-rows: 1fr min-content; к вашему .grid даст вам именно то, что вы ищете :).

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr min-content;
  grid-template-areas:
    "one two"
    "one three"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
</div>

Jens редактирует: Для лучшей поддержки браузера это можно использовать вместо: grid-template-rows: 1fr auto;, по крайней мере, в этом конкретном случае.

10
Kevin Powell

Сетка - это серия пересекающихся строк и столбцов.

Вы хотите, чтобы два элемента во втором столбце автоматически настраивали высоту своих строк в зависимости от их высоты содержимого.

Это не так, как работает сетка. Такие изменения высоты строки во втором столбце также влияют на первый столбец.

Если вы должны использовать CSS Grid, то я бы дал контейнеру, скажем, 12 строк, а затем элементы по мере необходимости занимали строки.

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: repeat(12, 15px);
}

.one {
  grid-row: 1 / -1;
  background: red;
}

.two {
  grid-row: span 10;
  background: lightgreen;
}

.three {
  grid-row: span 2;
  background: aqua;
}

.grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

В противном случае вы можете попробовать решение flexbox.

.grid {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
}

.one {
  flex: 0 0 100%;
  width: 30%;
  background: red;
}

.two {
  flex: 1 0 1px;
  width: 70%;
  background: lightgreen;
}

.three {
  background: aqua;
}

.grid>div {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="grid">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

2
Michael_B

При использовании сетки, и у вас есть используемая область шаблона сетки, и случайно вы задали ширину определенной области, вы остаетесь с космической сеткой, которая автоматически .. В этой ситуации пусть grid-template-columns будет либо min- content или max-content, чтобы он автоматически настраивал свою позицию.

0
dean filigreti

Определенно не самое элегантное решение и, вероятно, не лучшая практика, но вы всегда можете добавить больше строк

"one two"

перед той частью, где у вас есть

"one three"

так что в конечном итоге выглядит

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas:
    "one two"
    "one two"
    "one two"
    "one three"
}

Опять же, я уверен, что это всего лишь обходной путь, и есть лучшие решения ... Но это работает, если честно.

0
gymnast66x

Я новичок в сетке, поэтому извинения, если это далеко от цели.

Возможным подходом может быть группировка two и three вместе и использование flexbox?

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "one two"
}

.one {
  background: red;
  grid-area: one;
  padding: 50px 0;
}

.wrap {
  grid-area: two;
  display: flex;
  flex-direction: column;
}

.two {
  background: green;
  flex: 1;
}

.three {
  background: blue;
}
<div class="grid">
  <div class="one">
    One
  </div>
  <div class="wrap">

    <div class="two">
      Two
    </div>
    <div class="three">
      Three
    </div>
  </div>
</div>

0
sol