Сделать строки сетки необязательными - PullRequest
Новая
       2

Сделать строки сетки необязательными

1 голос
/ 07 октября 2019

Я создал шаблон сетки и хотел, чтобы первая строка была необязательной (область: «t»).

Если она скрыта, автоматическая строка должна заполнить оставшуюся высоту. Я попробовал это с minmax () функцией css, но она не работает. 

grid-template:
 "t t t t" minmax(0px, 40px)
 "h h h h" 40px
 "s l m r" auto
 "s f f f" 57px / 200px 100px auto 100px;

Вот ссылка на скрипку: https://jsfiddle.net/nzaj8102/

Мне удалось получитьэто работает путем создания двух шаблонных классов. Мне было интересно, могу ли я сделать это по-другому? 

.template-with-top{
    grid-template:
      "t t t t" 40px
      "h h h h" 40px
      "s l m r" auto
      "s f f f" 57px / 200px 100px auto 100px;
 }


  .template-without-top{
    grid-template:
      "h h h h" 40px
      "s l m r" auto
      "s f f f" 57px  / 200px 100px auto 100px;
    }

  .template-without-top > div:nth-child(1) {
     display:none
   }

Вот ссылка на скрипку: https://jsfiddle.net/hveu5bfc/

THX!

1 Ответ

0 голосов
/ 07 октября 2019

Хотя ваша идея minmax(0px, 40px) имеет смысл, она не работает, потому что не все в сетке имеет смысл. Дело в том, что функция minmax() по умолчанию имеет значение max , что означает, что высота строки будет 40px, даже если внутри нет содержимого.

Попробуйте сделать следующее:

  • Вместо использования minmax() в первом ряду (t t t t) установите для него значение auto, чтобы он принимал высоту содержимого.
  • Вместо использования auto в третьей строке (s l m r), установите его на 1fr, чтобы он занимал всю дополнительную высоту в контейнере, когда в первой строке нет содержимого.
  • Управляет высотой первой строки. на уровне элемента сетки. 

.app-grid {
  display: grid;
  height: 100vh;
  grid-template:
    "t t t t" auto
    "h h h h" 40px
    "s l m r" 1fr
    "s f f f" 57px;
}

.app-grid > div {
  border: 1px solid blue;
  border-radius: 5px;
}

body {
  margin: 0;
}
<div class="app-grid">
  <div style="grid-area: t; height: 40px; display: none;">t</div>
  <div style="grid-area: h;">h</div>
  <div style="grid-area: s;">s</div>
  <div style="grid-area: l;">l</div>
  <div style="grid-area: m;">m</div>
  <div style="grid-area: r;">r</div>
  <div style="grid-area: f;">f</div>
</div>

jsFiddle demo

...