Что произойдет, если конец столбца сетки больше максимального количества столбцов в сетке css?

Question

Я изучал сетку css из MDN . В разделе размещения на основе строк , немного поигравшись, я увидел странное поведение. Если макет состоит из двух столбцов, например, определен как grid-template-columns: 1fr 3fr;, и для одного из дочерних элементов я установил grid-column-end больше 2, он генерирует пустые столбцы с их собственным grid-gap. Вот его рабочий пример https://jsfiddle.net/u1paezkw/ Если вы посмотрите на header, вы заметите прямые пунктирные линии, представляющие пустые столбцы.

                body {
                    width: 90%;
                    max-width: 900px;
                    margin: 2em auto;
                    font: .9em/1.2 Arial, Helvetica, sans-serif;
                }
                
                .container {
                    display: grid;
                    grid-template-columns: 1fr 3fr;
                    grid-gap: 20px;
                }
header {
    grid-column: 1 / 13;
    grid-row: 1;
}

article {
    grid-column: 2;
    grid-row: 2;
}

aside {
    grid-column: 1;
    grid-row: 2;
}

footer {
    grid-column: 1 / 3;
    grid-row: 3;
}
        
header,
footer {
  border-radius: 5px;
  padding: 10px;
  background-color: rgb(207,232,220);
  border: 2px solid rgb(79,185,227);
}
        
aside {
  border-right: 1px solid #999;
}  

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids -->

<div class="container">
  <header>This is my lovely blog</header>
  <article>
    <h1>My article</h1>
    <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </article>
  <aside>
    <h2>Other things</h2>
    <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p>
  </aside>
  <footer>Contact me@mysite.com</footer>
</div>               

1. Кто-нибудь может объяснить это поведение, а также дать официальную ссылку на это. Как может быть больше столбцов, чем указано в grid-template-columns?

2. Для grid-column: 1 / 3 где находится третий столбец? Почему строка заканчивается в конце второго столбца?

Answer 1

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

Чтобы быть более точным, это больше 3, а не 2. При наличии 2 столбцов у вас будет 3 строки (1,2,3), поэтому вы можете разместить элемент в обоих столбцах, установив grid-column: 1 / 3

^{https://www.w3.org/TR/css-grid-1/#placement}

Затем, как указано в комментарии, вам необходимо понять концепцию явной и неявной сетки. Чтобы упростить задачу, вы определяете явную сетку, а неявная автоматически

Три свойства grid-template-rows, grid-template-columns и grid-template-areas вместе определяют явную сетку контейнера сетки . Окончательная сетка может оказаться больше из-за того, что элементы сетки размещены за пределами явной сетки ; в этом случае будут созданы неявные дорожки, размер этих неявных дорожек будет определяться свойствами grid-auto-rows и grid-auto-columns. ^ref

Также

Если элемент сетки расположен в строке или столбце, размер которого явно не равен grid-template-rows или grid-template-columns, создаются неявные дорожки сетки для его удержания. Это может произойти либо путем явного позиционирования в строке или столбце , выходящего за пределы диапазона , либо с помощью алгоритма автоматического размещения, создающего дополнительные строки или столбцы. Свойства grid-auto-columns и grid-auto-rows определяют размер таких неявно созданных дорожек. ^ref

Если вашего определения сетки недостаточно, чтобы содержать все элементы, для этой цели создаются дополнительные строки / столбцы, а окончательный сетка называется неявной сеткой. Это логично, поскольку не имеет смысла иметь элементы сетки, которые не принадлежат сетке.

В вашем случае использование grid-column:1/13 создаст в общей сложности 12 столбцов, где 2 явно определены и оставшееся будет auto и, конечно же, 11 пробелов.

Вы также можете построить целую сетку без какого-либо явного определения и только с использованием неявного.

Пример:

.box {
  display:grid;
  grid-gap:10px;
}

.box > * {
  height:50px;
  background:red;
}

/* the below will make the grid having 3 columns */
.box > *:nth-child(3) {
  grid-column:3;
  background:green;
}

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

имеют ли неявные правила сетки более высокий приоритет, чем явные? Мне это кажется нелогичным.

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