CSS Сетка против динамического c определение списка авторазмещение - PullRequest
Новая
       5

CSS Сетка против динамического c определение списка авторазмещение

0 голосов
/ 20 апреля 2020

Отказ от ответственности: Согласно spe c, можно объединить dt + dd пар в div, что позволило бы мне тривиально решить мою проблему, используя либо float и clear, flexbox или даже сетка CSS.

Существуют также альтернативы, такие как this , которые объединяют каждую группу из 2 dt + dd пар в отдельные теги ul. Это также работает, хотя и не является на 100% семантически точным.

Теперь я действительно пытаюсь найти решение проблемы, используя сетку CSS, не прибегая к какой-либо из вышеперечисленных методик.

В моем HTML есть следующая структура: 

dl
  dt
  dd

  dt
  dd

  dt
  dd

  dt
  dd

  ...

Я хочу отобразить их сгруппированными в 2 столбца и 2 строки, например: 

dt    dt
dd    dd

dt    dt
dd    dd

..    ..

Мне удалось найти решение для случая, когда у меня есть 4 пары и я хочу отобразить их в сетке 2x2: 

body {
  font-family: sans-serif;
}

dl {
  display: grid;
  grid-gap: 0 1rem;
  grid-template-columns: [col] 1fr [col] 1fr [col];
  grid-template-rows: repeat(auto-fill, 1fr);
  text-align: center;
}

dt {
  padding: 0.25rem 1rem;
  background: lightcoral;
}

dt:nth-of-type(2n + 1) {
  counter-increment: left;
  grid-column: col 1 / span 1;
}

dt:nth-of-type(2n) {
  counter-increment: right;
  grid-column: col 2 / span 1;
}


/* Comment out the following 2 selectors to see the "automatic behavior */

dt:nth-of-type(2) {
  grid-row: 1;
}

dt:nth-of-type(4) {
  grid-row: 3;
}


/* /Comment out */

dd {
  margin: 0 0 1rem;
  padding: 0.25rem 1rem;
  background: lightcyan;
}

dd:nth-last-of-type(-n + 2) {
  margin-bottom: 0;
}

dd:nth-of-type(2n + 1) {
  grid-column: col 1 / span 1;
}

dd:nth-of-type(2n) {
  grid-column: col 2 / span 1;
}
<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="src/styles.css" />
</head>

<body>
  <div id="app">
    <dl>
      <dt>Item 1</dt>
      <dd>Nunc ut quam at sem vehicula hendrerit sed vitae risus</dd>
      <dt>Item 2</dt>
      <dd>
        uisque a maximus mauris. Quisque metus quam, auctor ac porttitor.
      </dd>
      <dt>Item 3</dt>
      <dd>
        Aliquam varius est ac lectus malesuada, a sagittis arcu laoreet.
      </dd>
      <dt>Item 4</dt>
      <dd>Etiam et sapien at mi ultrices maximus vitae vel arcu.</dd>
    </dl>
  </div>
</body>

</html>

Однако это работает только потому, что я вручную определяю строку, в которой должны находиться указанные c dt элементы: 

dt:nth-of-type(2) {
  grid-row: 1;
}

dt:nth-of-type(4) {
  grid-row: 3;
}

Без этого я бы получил:

Grid Autoplacement Issue

Расположение строки для элементов справа отключено на 1.

Есть ли способ «сдвинуть» значение grid-row на -1 обычным способом?

Я также пытался связать значение grid-row с counter, но, похоже, это не поддерживается.

1 Ответ

1 голос
/ 20 апреля 2020

Это цель grid-auto-flow: dense

Если указано, алгоритм автоматического размещения использует «плотный» алгоритм упаковки, который пытается заполнить отверстия ранее в сетка, если мелкие предметы появятся позже. Это может привести к тому, что элементы будут отображаться не в порядке, при этом будут заполнены отверстия, оставленные более крупными элементами. ref

Я также упростил код: 

body {
  font-family: sans-serif;
}

dl {
  display: grid;
  grid-gap: 0 1rem;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  grid-auto-flow: dense;
}

dt {
  padding: 0.25rem 1rem;
  background: lightcoral;
}
dl > :nth-of-type(2n + 1) {
  grid-column: 1;
}

dl > :nth-of-type(2n) {
  grid-column: 2;
}

dd {
  margin: 0 0 1rem;
  padding: 0.25rem 1rem;
  background: lightcyan;
}

dd:nth-last-of-type(-n + 2) {
  margin-bottom: 0;
}
  <div id="app">
    <dl>
      <dt>Item 1</dt>
      <dd>Nunc ut quam at sem vehicula hendrerit sed vitae risus</dd>
      <dt>Item 2</dt>
      <dd>
        uisque a maximus mauris. Quisque metus quam, auctor ac porttitor.
      </dd>
      <dt>Item 3</dt>
      <dd>
        Aliquam varius est ac lectus malesuada, a sagittis arcu laoreet.
      </dd>
      <dt>Item 4</dt>
      <dd>Etiam et sapien at mi ultrices maximus vitae vel arcu.</dd>
    </dl>
  </div>
...