Сетка размещает элементы в столбце, а не в строке - PullRequest
Новая
       71

Сетка размещает элементы в столбце, а не в строке

1 голос
/ 16 мая 2019

Рассмотрим абсолютно позиционированный <aside>, который имеет display: grid с grid-template-columns.

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

Также обратите внимание, что добавление .fix1 или .fix2 к <aside> заставляет сетку укладывать элементы в ряд, как и ожидалось (но ломает другие вещи).

Почему элементы сетки (<span>) размещаются в столбце, а не в строке? Как исправить это и по-прежнему позиционировать содержимое с помощью CSS-сетки ? (Мне не интересны Flexbox, поплавки и т. Д.) 

main {
  width: 300px;
}

div {
  position: relative;
}

section {
  width: 100%;
  height: 30px;
  background-color: black;
}
 
aside {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(auto-fill, 2em);
  top: 0;
  right: 5px;
  height: 100%;
}

span {
  display: block;
}

span:nth-child(1) {
  background-color: yellow;
}

span:nth-child(2) {
  background-color: blue;
}

/* Adding this class to <aside>
   fixes the issue, but aligns
   grid contents to the left */
.fix1 {
  width: 100%;
}

/* Adding this class to <aside>
   fixes the issue, but breaks
   the placement of <aside> */
.fix2 {
  position: relative;
}
<main>
  <div>
    <aside class="">
      <span>.</span>
      <span>.</span>
    </aside>
    <section/>
  </div>
</main>

1 Ответ

1 голос
/ 16 мая 2019

Это не относится к сетке CSS, но к поведению сжимается до соответствия абсолютного элемента.Из спецификации мы имеем:

Расчет ширины сжатия для подгонки аналогичен вычислению ширины ячейки таблицы с использованием алгоритма автоматической компоновки таблицы.Грубо говоря: вычислите предпочтительную ширину, отформатировав содержимое без разрывов строк , кроме случаев, когда происходят явные разрывы строк, а также рассчитайте предпочтительную минимальную ширину, например, попробовав все возможные разрывы строк.CSS 2.1 не определяет точный алгоритм.В-третьих, вычислите доступную ширину: это определяется путем определения «ширины» после установки «влево» (в случае 1) или «вправо» (в случае 3) на 0.

Тогда сжатие доподходящая ширина: min(max(preferred minimum width, available width), preferred width).

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

И если мы проверяем спецификацию сетки CSS, относящуюся к auto-fill

Когда в качестве номера повторения задано автоматическое заполнение, если контейнер сеткиимеет определенный размер или максимальный размер на соответствующей оси, тогда число повторений является наибольшим возможным положительным целым числом, которое не приводит к тому, что сетка переполняет свой контейнерный массив (рассматривая каждую дорожку как функцию максимального размера дорожки, если она определена или какв противном случае его функция минимального размера дорожки и с учетом разрыва); если любое количество повторений переполнится, то 1 повторение .В противном случае, если контейнер сетки имеет определенный минимальный размер на соответствующей оси, количество повторений является наименьшим возможным положительным целым числом, которое удовлетворяет этому минимальному требованию. В противном случае указанный список дорожек повторяется только один раз.

В основном вы попадаете в последний случай, поскольку размер абсолютного элемента равен размеру его содержимого, и мы можем толькопоместите в него одно повторение.

Удалите display:grid, чтобы увидеть размер: 

main {
  width: 300px;
}

div {
  position: relative;
}

section {
  width: 100%;
  height: 30px;
  background-color: black;
}
 
aside {
  position: absolute;
  grid-template-columns: repeat(auto-fill, 2em);
  top: 0;
  right: 5px;
  height: 100%;
}

span {
  display: block;
}

span:nth-child(1) {
  background-color: yellow;
}

span:nth-child(2) {
  background-color: blue;
}

/* Adding this class to <aside>
   fixes the issue, but aligns
   grid contents to the left */
.fix1 {
  width: 100%;
}

/* Adding this class to <aside>
   fixes the issue, but breaks
   the placement of <aside> */
.fix2 {
  position: relative;
}
<main>
  <div>
    <aside class="">
      <span>.</span>
      <span>.</span>
    </aside>
    <section/>
  </div>
</main>

Чтобы получить то, что вы хотите, вы можете рассмотреть поток столбцов и определить каждый столбец как 2em: 

main {
  width: 300px;
}

div {
  position: relative;
}

section {
  width: 100%;
  height: 30px;
  background-color: black;
}
 
aside {
  position: absolute;
  display:grid;
  grid-auto-columns: 2em;
  grid-auto-flow:column;
  top: 0;
  right: 5px;
  height: 100%;
}

span {
  display: block;
}

span:nth-child(1) {
  background-color: yellow;
}

span:nth-child(2) {
  background-color: blue;
}

/* Adding this class to <aside>
   fixes the issue, but aligns
   grid contents to the left */
.fix1 {
  width: 100%;
}

/* Adding this class to <aside>
   fixes the issue, but breaks
   the placement of <aside> */
.fix2 {
  position: relative;
}
<main>
  <div>
    <aside class="">
      <span>.</span>
      <span>.</span>
    </aside>
    <section/>
  </div>
</main>

position:relative исправьте проблему, потому что расчет ширины больше не будет соответствовать усадке, но у вас будет 100% контейнераширина блока ref , поэтому у вас достаточно места для повторения.

width:100% исправьте проблему так же, как и position:relative, так как ширина будет увеличиваться додостаточно места для повторения.

...