Как воссоздать разметку с помощью сетки CSS? - PullRequest
Новая
       14

Как воссоздать разметку с помощью сетки CSS?

0 голосов
/ 12 сентября 2018

У меня есть макет с изображением слева и текстовым содержимым справа. Выложено примерно так: 

.left {
  max-width: calc(100% - 150px);
  float: left;
}

img {
  width: 300px;
  max-width: 100%;
}
<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

Основная идея заключается в том, что изображение может иметь размер до 300px , но всегда должно оставлять как минимум 150px для текстового содержимого справа. Текстовое содержимое будет занимать как можно больше места, которое всегда будет не менее 150 пикселей на картинке.

Моя цель состоит в том, чтобы воссоздать это с помощью CSS-сетки, но меня смущает, как использовать grid-template-columns для получения того же поведения. На данный момент у меня что-то вроде этого: 

.wrapper {
  display: grid;
  grid-template-columns: auto minmax(150px, auto);
}

img {
  width: 300px;
  max-width: 100%;
}
<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
</div>

Это учитывает минимум 150px для правого столбца, но не расширяется, чтобы соответствовать изображению. Как я могу заставить макет сетки вести себя так же, как плавающие объекты в моем первом примере?

1 Ответ

0 голосов
/ 12 сентября 2018

вместо minmax(150px, auto); добавить minmax(150px, 1fr)

fr блок займет свободное место.

франк единица в процентах (%). Но они делают тяжелую работу для нас. Например, если вы хотите, чтобы 4 столбца имели одинаковый размер, вы можете сделать 25% 25% 25% 25%. Который будет похож на 1fr 1fr 1fr 1fr.

Но если у вас есть grid-gap: 20px, вы заметите, что при использовании процентных ставок появится свиток. К счастью, об этом позаботится юнит, и никакой прокрутки не появится.

Также grid-template-columns: 200px 1fr, в пересчете на проценты будет grid-template-columns: 200px calc(100% - 200px) Итак, снова подразделение делает тяжелую работу за нас.

Вы можете думать, что юнит fr является свободным пространством, поскольку он получает доступное свободное пространство и выполняет для нас некоторую тяжелую работу.

Может насытиться? Посмотрите потрясающую серию видеороликов css grid

Надеюсь, это поможет вам.

Смотрите это в действии здесь

...