What happens if grid-column-end is greater than the maximum columns in css grid?

Question

I've been studying css grid system from MDN. In the line based placement section, after playing around a bit I saw a weird behaviour. If the layout is two column, say e.g. defined as grid-template-columns: 1fr 3fr; and to one of the children I set the grid-column-end greater than 2, it generates empty columns with their own grid-gap. Here's a working example of it https://jsfiddle.net/u1paezkw/ If you inspect the header you'll notice straight dotted lines representing empty columns.

                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. Can somebody please explain this behaviour and also please give some official reference for this. How can there be more columns than specified in grid-template-columns?

2. For grid-column: 1 / 3 where is the third column? Why does line end at the end of second column?

Answer 1

and to one of the children I set the grid-column-end greater than 2, it generates empty columns with their own grid-gap.

To be more accurate, it's greated than 3 and not 2. When having 2 columns you will have 3 lines (1,2,3) so you can place an element across both column by setting grid-column: 1 / 3

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

Then as stated in the comment you need to understand the concept of explicit and implicit grid. To make it easy, you define the explicit grid and the implicit one is defined automatically

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container. The final grid may end up larger due to grid items placed outside the explicit grid; in this case implicit tracks will be created, these implicit tracks will be sized by the grid-auto-rows and grid-auto-columns properties.^ref

Also

If a grid item is positioned into a row or column that is not explicitly sized by grid-template-rows or grid-template-columns, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row or column that is out of range, or by the auto-placement algorithm creating additional rows or columns. The grid-auto-columns and grid-auto-rows properties specify the size of such implicitly-created tracks. ^ref

If your definition of the grid isn't enough to contain all the elements then extra row/columns are created for the purpose and the final grid is called the implicit grid. This is logical since it wouldn't make sense to have grid items that doesn't belong to the grid.

In your case, using grid-column:1/13 will create a total of 12 columns where 2 are explicitely defined and the remaining will be auto and of course 11 gaps.

---

You can also build a whole grid without any explicit definition and only using the implicit one.

Example:

.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>

---

does implicit grid rules get higher priority than explicit ones? It seems counter intuitive to me

It's not about priority but you can see the implicit grid as a needed extension to the explicit one in order to contain all the elements.