I was checking how grid-column and grid-row properties work in detail and, when I was looking at how to set a span without specifying the starting or the end point, I stumbled into 2 solutions:

• one using double "span"
• one using auto and span

Now I was curious about how browsers interpret these two options, but I couldn't find a specific explanation. How do these two expressions behave differently (if they do)? Take the following two options as an example (where I'm setting a span 2 for a column)

.option-1 {
 grid-column: auto / span 2
}

.option-2 {
 grid-column: span 2 / span 2
}

CodePudding user response：

First, grid-column: span 2 / span 2 is equal to grid-column: span 2 / auto because:

If the start line is equal to the end line, remove the end line. ^ref

And it behaves the same as grid-column: auto / span 2

Show code snippet

.container {
   display:grid;
   grid-template-columns:repeat(4,1fr);
   margin:5px;
}
.container > div {
  height:50px;
  background:red;
}

<div class="container">
  <div style="grid-column:span 2/auto"></div>
</div>
<div class="container">
  <div style="grid-column:auto/span 2"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

To use easy words it's like you are saying: auto place the element and take two columns.

You can find the full algorithm here: https://drafts.csswg.org/css-grid/#placement