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

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

0 голосов
/ 02 июня 2018

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

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 ]

0 голосов
/ 03 июня 2018

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

Другими словами, алгоритм определения размера дорожки видитмаксимум 45px в ряду 1 и 18px в ряду 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>
0 голосов
/ 03 июня 2018

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

Теперь, если у сетки есть пространстводля поддержки 45px, которую вы определили, h4 всегда будет иметь высоту 45px, поэтому меньшее количество текста приведет к пустому пробелу, и если сетка не сможет поддерживать такую ​​большую высоту, то h4 изменит размер между высотой содержимого (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>
...