Настройте высоту строки в соответствии с динамическим содержимым в CSS Grid.

У меня есть этот код

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: minmax(min-content, 45px) 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

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

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: minmax(min-content, 45px) 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Вы можете видеть большое пространство между первым рядом и вторым, это происходит, даже если установка minmax grid-template-rows:minmax(min-content,45px) 1fr 18px; Я не знаю, что может быть не так, потому что установка 1fr следует изменить размер с доступным содержимым, но это выглядит как minmax(min-content,45px) не движется вообще. Я хочу изменить размер содержимого, чтобы не видеть это большое пространство

Источник

2 ответа

Решение

Я считаю, что проблема в том, что 1fr применяется после учета максимальных базовых размеров.

Другими словами, алгоритм определения размера дорожки видит максимум 45 пикселей в строке 1 и 18 пикселей в строке 3, а затем складывает их. Что бы ни осталось (340px - 63px) потребляется строкой 2 с 1fr,

Вы можете обойти проблему, выбрав другой подход:

  • забывать minmax()
  • установить строку в auto (основанная на содержании высота)
  • контролировать максимальную высоту элемента сетки
  • установить элемент в overflow: hidden

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: auto 1fr 18px; /* adjustment */
  grid-template-areas: "simb title title"
                     "simb subtitle subtitle"
                           ". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px;
  max-height 45px;  /* new */
  overflow: hidden; /* new */
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching
    mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Вот еще один потенциальный обходной путь:

  • забывать minmax()
  • установите верхний и нижний ряды min-content
  • установите контейнер на overflow: auto

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas: "simb title title"
                      "simb subtitle subtitle"
                        ".      .     price";
  padding: 0;
  width: 340px;
  height: 120px;
  overflow: auto;
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px;
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center;
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
    <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>
<br>
<a href="" data-content="curso">
    <h4 data-curso="title">Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice Mr cat, looking for a job at catching mice</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Источник

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

Теперь, если в сетке есть пространство для поддержки 45px, которое вы определили, h4 всегда будет иметь высоту 45px, поэтому меньше текста приведет к пустому пробелу, и если сетка не сможет поддерживать такую ​​большую высоту, h4 изменит размер между своим содержимым height (min-content) и 45px, также если вы установите высоту сетки в 0, вы увидите, что h4 сохраняет свою собственную высоту содержимого.

Я бы посоветовал вам удалить minmax() и использовать вместо него auto.

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: auto 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Или используйте minmax(), где max и min равны min-содержимому.

a {
  text-decoration: none;
  color: black
}

* {
  margin: 0;
  padding: 0;
}

[data-content="curso"] {
  display: grid;
  grid-template-columns: 87px 1fr 10ex;
  grid-template-rows: minmax(min-content, min-content) 1fr 18px;
  grid-template-areas: "simb title title""simb subtitle subtitle"". . price";
  padding: 0;
  width: 340px;
  height: 120px
}

[data-curso="title"] {
  grid-area: title;
  color: rgb(41, 48, 59);
  margin-left: 7px
}

[data-curso="precio"] {
  grid-area: price;
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 18px
}

[data-precio="simb"] {
  height: 17px;
}

[data-curso="simb"] {
  grid-area: simb;
  height: 87px;
  width: 87px;
  align-self: flex-start;
  justify-self: center
}

[data-curso="subtitle"] {
  grid-area: subtitle;
  color: #686f7a;
  margin-left: 7px
}
<a href="" data-content="curso">
  <h4 data-curso="title">Mr cat, looking for a job</h4>
  <h5 data-curso="subtitle">3 years experience catching mice</h5>
  <img data-curso="simb" src="http://www.catster.com/wp-content/uploads/2016/05/cats-politics-TN.jpg">
  <div data-curso="precio">
    <span>1500</span>
  </div>
</a>

Источник
Другие вопросы по тегам