Сетка, расширяющая другие элементы в сетке - PullRequest
Новая
       9

Сетка, расширяющая другие элементы в сетке

1 голос
/ 31 марта 2020

Я столкнулся с проблемой, когда при расширении (добавление большего количества контента для растягивания) один элемент в сетке расширяет все остальные, даже если у других нет дополнительного содержимого, которое потребовало бы их растягивания, оставляя дополнительное пустое пространство под ним.

Вот как я настраиваю свою сетку: 

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 5px 5px;
  grid-template-areas: "vcard vcard vcard3 vcard3" "vcard vcard vcard3 vcard3" "vcard2 vcard2 vcard3 vcard3" "vcard2 vcard2 vcard4 vcard4" "vcard2 vcard2 vcard4 vcard4";
  grid-gap: 10px;
  border: 1px solid #fff;
}

.vcard {
  grid-area: vcard;
}

.vcard2 {
  grid-area: vcard2;
}

.vcard3 {
  grid-area: vcard3;
}

.vcard4 {
  grid-area: vcard4;
}

Когда я добавляю дополнительный текст к div.vcard, он растягивается, как и ожидалось, однако и div.vcard3 и div.vcard4 растягиваются, хотя Я не добавляю к ним ничего лишнего. Есть ли способ избежать такого поведения? Чтобы раскрылись только элементы, которые должны расширяться.

Вот рабочий пример: codepen

1 Ответ

1 голос
/ 31 марта 2020

Добавляя контент к элементам сетки, вы не только расширяете элементы, но и увеличиваете высоту строк.

Соедините это с тем фактом, что элементы сетки по умолчанию установлены на align-items: stretch, и у вас есть элементы, которые увеличивают полную высоту области сетки (которая может состоять из нескольких строк).

Вы можете переопределить значение по умолчанию, установив align-items: start, но тогда они просто уменьшатся до высоты элемента, не влияя на высоту строки (поскольку она задается самым высоким содержимым). 

* {
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  box-sizing: border-box;
  font-family: Ubuntu, Helvetica, Verdana, Arial, sans-serif;
}

html {
  background: linear-gradient(-10deg, #C62828, #BA68C8);
  min-height: 100vh;
  font-size: 22px;
}

body {
  padding: 50px;
}

code {
  margin: 1px 5px;
  padding: 2px 5px 1px 5px;
  font-family: monospace;
  border-radius: 2px;
  border: 1px dotted #fff;
}

p {
  margin: 25px 10px;
}

h2 {
  text-align: center;
  margin-top: 50px;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.outlined {
  height: 200px;
  border: 1px solid #fff;
  margin-bottom: 50px;
}

.grid>* {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid #fff;
  border-radius: 2px;
  padding: 20px;
  /*margin: 10px;*/
  text-align: center;
}

.grid a {
  display: block;
}

.grid>a:hover {
  background-color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  transition: background-color ease 0.5s;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 5px 5px;
  grid-template-areas: "vcard vcard vcard3 vcard3" "vcard vcard vcard3 vcard3" "vcard2 vcard2 vcard3 vcard3" "vcard2 vcard2 vcard4 vcard4" "vcard2 vcard2 vcard4 vcard4";
  grid-gap: 10px;
  border: 1px solid #fff;
  
  /* NEW */
  align-items: start;
}

.vcard {
  grid-area: vcard;
}

.vcard2 {
  grid-area: vcard2;
}

.vcard3 {
  grid-area: vcard3;
}

.vcard4 {
  grid-area: vcard4;
}
<html>

<head>
</head>

<body>
  <div class="grid">
    <div class="vcard">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
      torquatos. Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
      justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
      ad. Pri eu justo aeque torquatos.ec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea.
      Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.
    </div>
    <div class="vcard2">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
      torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
      justo aeque torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius
      ad. Pri eu justo aeque torquatos.</div>
    <div class="vcard3">Grid item 3</div>
    <div class="vcard4">Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque
      torquatos.Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu
      justo aeque torquatos.</div>
  </div>
</body>

</html>

Кажется, что вы ищете, это макет каменной кладки. Вот пост, который может помочь:

...