If the value of grid-column-end exceeds the maximum number of columns in a CSS grid, what will occur?

Question

If the value of grid-column-end exceeds the maximum number of columns in a CSS grid, what will occur?

I have been delving into the CSS grid system with insight from MDN. In the segment on line based placement, after experimenting a bit, I came across an unusual behavior. When the layout consists of two columns, for example defined as grid-template-columns: 1fr 3fr;, and the grid-column-end for one of the child elements is set greater than 2, it results in empty columns with their own grid-gap. An illustrative example can be seen at this link https://jsfiddle.net/u1paezkw/. By inspecting the header, you'll notice dotted lines representing these surplus 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 <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d60684d60747e647968236e6260">[email protected]</a></footer>
</div>

Could someone enlighten me about this phenomenon and also provide an official reference? How can there exist more columns than those specified in grid-template-columns?
Regarding grid-column: 1 / 3, where is the third column located? Why does the line end at the conclusion of the second column?

html css css-grid

Answer 1

Answer №1

When I set the grid-column-end to be greater than 2 for one of the children, it creates empty columns with their own grid-gap.

To clarify, it should actually be greater than 3 and not 2. With 2 columns, you have 3 lines (1, 2, 3) so you can position an element across both columns by setting grid-column: 1 / 3.

https://i.sstatic.net/5pBOr.png

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

As mentioned in the comment, understanding the concept of explicit and implicit grids is essential. You define the explicit grid, while the implicit grid is generated automatically.

The properties grid-template-rows, grid-template-columns, and grid-template-areas collectively define the explicit grid of a grid container. Any grid items placed outside the explicit grid result in the creation of implicit tracks, which are sized by the grid-auto-rows and grid-auto-columns properties.^ref

In addition,

If a grid item is positioned in a row or column that is not explicitly sized by grid-template-rows or grid-template-columns, implicit grid tracks are created to accommodate it. This occurs when a grid item is positioned in a row or column that is out of range or through the auto-placement algorithm generating additional rows or columns. The grid-auto-columns and grid-auto-rows properties specify the size of these implicitly created tracks.^ref

If your grid definition does not contain all elements, extra rows/columns are added to create the implicit grid. This ensures that all grid items belong within the grid structure.

In this scenario, using grid-column:1/13 will result in a total of 12 columns, where 2 are explicitly defined and the rest are set to

auto</code, creating 11 gaps as well.</p>
<hr />
<p>You can construct an entire grid without any explicit definitions and solely rely on the implicit grid.</p>
<p>For example:</p>
<div>
<div>
<pre class="snippet-code-css lang-css"><code>.box {
  display: grid;
  grid-gap: 10px;
}

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

/* This rule will make the grid have 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>

Answer 2

When I set the grid-column-end to be greater than 2 for one of the children, it creates empty columns with their own grid-gap.

To clarify, it should actually be greater than 3 and not 2. With 2 columns, you have 3 lines (1, 2, 3) so you can position an element across both columns by setting grid-column: 1 / 3.

https://i.sstatic.net/5pBOr.png

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

As mentioned in the comment, understanding the concept of explicit and implicit grids is essential. You define the explicit grid, while the implicit grid is generated automatically.

The properties grid-template-rows, grid-template-columns, and grid-template-areas collectively define the explicit grid of a grid container. Any grid items placed outside the explicit grid result in the creation of implicit tracks, which are sized by the grid-auto-rows and grid-auto-columns properties.^ref

In addition,

If a grid item is positioned in a row or column that is not explicitly sized by grid-template-rows or grid-template-columns, implicit grid tracks are created to accommodate it. This occurs when a grid item is positioned in a row or column that is out of range or through the auto-placement algorithm generating additional rows or columns. The grid-auto-columns and grid-auto-rows properties specify the size of these implicitly created tracks.^ref

If your grid definition does not contain all elements, extra rows/columns are added to create the implicit grid. This ensures that all grid items belong within the grid structure.

In this scenario, using grid-column:1/13 will result in a total of 12 columns, where 2 are explicitly defined and the rest are set to

auto</code, creating 11 gaps as well.</p>
<hr />
<p>You can construct an entire grid without any explicit definitions and solely rely on the implicit grid.</p>
<p>For example:</p>
<div>
<div>
<pre class="snippet-code-css lang-css"><code>.box {
  display: grid;
  grid-gap: 10px;
}

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

/* This rule will make the grid have 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>

If the value of grid-column-end exceeds the maximum number of columns in a CSS grid, what will occur?

Answer №1

Similar questions

You are unable to use multiple background colors on a material UI snackbar

When the width of a single table is large, Bootstrap tables can appear misaligned and not properly

What is the solution for incorporating multiple elements in knockout's applyBindingsToNode function?

What is causing the elements on the screen to not occupy the entire screen?

Two dropdown menus opening simultaneously

Steps to insert a logo into a Bootstrap navbar

Injecting CSS into a dynamically created element within a Polymer component using jQuery

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

Capture value from HTML datalist and insert into textarea

Issue with Bootstrap modal not displaying in the center as expected

Issues with CSS not loading properly on EJS files within subdirectories

Unable to adjust image opacity using jQuery

Issue where the link in the first column of a horizontal scrolling table is unclick

To activate two separate click events, one for an absolute element and another for the element positioned behind it, simply click on the desired absolute element to trigger both actions

Struggles encountered when choosing the initial visible item

What could be the reason that the results of my quick sort function are not appearing on the screen

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

What is the best way to use a CSS selector to target multiple divs such as block-11, block-12, and so

Looking to run a JavaScript command without the need for any triggering events?

Transferring data from JavaScript to an HTML page