Закрытие пробелов в сетке при удалении элементов сетки - PullRequest
Новая
       7

Закрытие пробелов в сетке при удалении элементов сетки

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

Есть ли способ использовать компоновку сетки с пропусками сетки и пропущенными областями сетки, не оставляя лишних пропусков в макете. 

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'a' 'b' 'c' 'd'; 
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}
<div class="main">
  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>
</div>

Вы можете видеть, что между B и D есть промежуток, когда C отсутствует в макете.

Есть ли способ избежать этого, кроме перехода к гибкому макету (отображение без сетки)?

Спасибо, Srikanth

Ответы [ 2 ]

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

Ответ - да.Удалить grid-template-areas и связанные с ним grid-area правила. 

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/
<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>

Когда вы создаете сетку, используя grid-template-areas, помните следующее:

  • grid-template-areas создает явная сетка .
  • Строка создается для каждого строкового значения.Поскольку у вас есть четыре строки ("a", "b", "c", "d"), создается четыре явных строки.Эти строки существуют с элементами сетки или без них.
  • Объяснение: Поскольку контейнер создает явную сетку, он не учитывает существование элементов сетки.Контейнер создает строки и столбцы.Когда эти строки и столбцы пересекаются, они создают ячейки.Ячейки могут быть заняты или незаняты.
  • Подумайте об этом следующим образом: Соотношение между рядами сетки и элементами аналогично трекам и поездам.Следы существуют с или без поездов.Фактически, на языке Grid столбцы и строки известны как "дорожки" .Треки - это просто инфраструктура.

Поэтому лучше всего переключаться с явных строк, которые определены с использованием grid-template-areas и / или grid-template-rows, на неявных строк, которыеразрешите алгоритму сетки создавать дорожки строк по мере необходимости для размещения элементов.

Если вы удалите grid-template-areas и grid-area из своего набора правил, сетка автоматически расположит элементы сетки в одном столбце (так как выопределили), и у него нет оснований пропускать строки / оставлять пробелы.Вот снова код сверху: 

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/
<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>

Если вы не хотите, чтобы элементы сетки занимали все свободное пространство, используйте align-content: start, который переопределяет значение по умолчанию align-content: stretch: 

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  align-content: start; /* new */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/
<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>

Наконец, если вы хотите, чтобы каждая неявная строка имела определенную высоту, используйте grid-auto-rows: 

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 500px;
}
.container {
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-areas: 'a' 'b' 'c' 'd'; */
  align-content: start; /* new */
  grid-auto-rows: 40px; /* new */
  width: 200px;
  grid-gap: 10px;
}

.a, .b, .c, .d {
  border: 1px solid black;
  width: 200px;
}

/*
.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
*/
<div class="main">

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>

</div>
0 голосов
/ 25 июня 2018

Если вы удалите grid-template-areas, это работает из коробки 

.container {
  display: inline-grid;
  grid-template-columns: 1fr;
  width: 200px;
  grid-gap: 10px;
  margin: 1em;
}

.a,
.b,
.c,
.d {
  border: 1px solid black;
  width: 200px;
}
<div class="main">
  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="d">D box</div>
  </div>

  <div class="container">
    <div class="a">A box</div>
    <div class="b">B box</div>
    <div class="c">C box</div>
    <div class="d">D box</div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...