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

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

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

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

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>

Ответ 1

Добавление 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>

Ответ 2

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

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

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

Если вы должны использовать 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>

Ответ 3

Я новичок в сетке, так что извиняюсь, если это не так.

Возможным подходом может быть группировка 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>

Ответ 4

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

"one two"

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

"one three"

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

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

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

Ответ 5

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