1

.container {
    display:grid;
    grid-template-columns: 200px 200px; 
    grid-template-rows: 100px 100px;
    grid-auto-flow: row;

    grid-gap: 5px 5px;
    height:500px; 
    width:50%;
    border: 1px solid;

}


.grid-box {
    background-color: skyblue;  
    padding: 10px 5px;
}


.four {
    grid-column: span 2/3;
    grid-row: 2;
}   
 <div class="container">
        <div class="grid-box one">First</div>
        <div class="grid-box two">two</div>
        <div class="grid-box three">three</div>
        <div class="grid-box four">Four</div>
        <div class="grid-box five">Five</div> 
        <div class="grid-box six">Six</div>   
</div>

From what I read, span 2/3 should be invalid, and not work, and indeed, it doesn't seem to work properly, as the item does not start from the 2nd column, however, it does end at the 3rd.

However, using span 2/4, produces the following outcome:

.container {
    display:grid;
    grid-template-columns: 200px 200px; 
    grid-template-rows: 100px 100px;
    grid-auto-flow: row;

    grid-gap: 5px 5px;
    height:500px; 
    width:50%;
    border: 1px solid;

}


.grid-box {
    background-color: skyblue;  
    padding: 10px 5px;
}


.four {
    grid-column: span 2/4;
    grid-row: 2;
}
 <div class="container">
        <div class="grid-box one">First</div>
        <div class="grid-box two">two</div>
        <div class="grid-box three">three</div>
        <div class="grid-box four">Four</div>
        <div class="grid-box five">Five</div> 
        <div class="grid-box six">Six</div>   
</div>

Seemingly it works exactly as expected. The item starts from the 2nd column and ends the 4rth.

So, does it actually work? Why does it work now, but it doesn't work if the item ends at the 3rd column?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415

1 Answers1

2

From what I read, span 2/3 should be invalid, and not work

No it's valid and it's working fine.

span 2/3 means end at grid line 3 (and not column 3) and span 2 columns back. Same logic for span 2/4. It's the shorthand of:

grid-column-start: span 2;
grid-column-end: 3;

So in both cases your element will take exactly 2 columns and only the ending line with be different.

Worth to note that in your case you defined a 2 columns layout so you have 3 lines (from 1 to 3). The span 2/4 will force the creation of an extra implicit column to have a total of 3 columns and 4 lines. A third column having an auto width like you can notice.

Without the keyword span it would be a different story and still you cannot consider columns

2/4 means start at line 2 and end at line 4 (covering column 2 and column 3)

2/3 means start at line 2 and end at line 3 (covering only column 2)

Related questions if your are missing the concept of lines:

CSS Grids: Relation between grid gaps(gutters) and grid lines

Understanding grid negative values

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • So, span 2/4 moves the starting point of the item because the beginning is not defined, it simply means that the item has to span 2 cols or lines, and end at the 4th one, so the item moves to the 2nd line in order to be able to span2 and end at the 4th one. At span 2/3, the item does not have to move, because from the position it already is, it can span 2 and end at the 3rd one. Is that correct? –  Jan 14 '21 at 22:23
  • @ILoveCoffee yes.In your equation you have *start*, *end* and *size*. You always define two and the third one will be logically inferred (in your case the start is the automatic one) – Temani Afif Jan 14 '21 at 22:25
  • So, in span 2/3, the span means the 'size', the '2' after span is the value of the size, and the 3rd value is the end of the expansion? The beginning is not defined if span is used? and if beginning value is given, then span cannot be defined? –  Jan 14 '21 at 22:37
  • 1
    @ILoveCoffee yes you cannot define 3 values since it's one equation so you only need to define 2 and the missing one will be set by the browser. – Temani Afif Jan 14 '21 at 23:06
  • Hey. Can I ask you something again? I'm experimenting, and I found a case that I can't explain to myself. Grid-column: -1/3 and -1/4 produce the same outcome, and I can't understand why doesn't -1/4 make the item start from the 4th grid line? -1/5 makes the item start from the 4th one. I am not understanding why? Shouldn't -1/4 make the item start from grid 4? Even using the normal properties of start and end still produces the same outcome. Why does the item not start from the 4th line, but if I set the start to 5th line, then it starts at 4th? Here's jsfiddle. https://jsfiddle.net/dvjy65w2/ –  Jan 15 '21 at 21:54
  • @ILoveCoffee you have 2 columns so 3 lines (1,2,3) OR (-3,-2,-1) so in your case -1 = 3 .. 3/3 is invalid and will get computed to 3/auto (read this: https://stackoverflow.com/a/57271867/8620333) and -1/4 is 3/4 and it make the item ENDS on line 4 not start on line 4 .. -1/5 = 3/5 makes the element ends at line 5 .. and in all the case you are starting from 3 which is also -1 and is the last line. – Temani Afif Jan 15 '21 at 22:02
  • I read your answer already, and that's why I was expecting -1/4 to mean start at 4th line and end at the last one, because in your answer, it says that, if the start line is further end-ward than the end line, the two lines get swapped. So, I thought that -1/4 would swap the two, and the 4th would become the start line. Yet that is not happening. Am I misunderstanding something? By the way, if 3/3 means 3/auto, and auto = 1, then 3/3 means 3/1, but how is that not invalid? The item clearly does not end at the 1st line. –  Jan 15 '21 at 22:48
  • 1
    @ILoveCoffee *if the start line is further end-ward than the end line* --> it's not the case here, -1 is the last line which is 3 and 3 is before 4 so it start on 3 (-1) and ends on 4 ...auto is not 1, auto means that you didn't specify the end and by default the element will take only one column, you can see the auto as `span 1` not `1`. It doesn't make sense to default the start/end line for all the item to `1`. If you specify nothing then the browser will place the item automatically taking one column – Temani Afif Jan 15 '21 at 22:53
  • I understand now. Thanks. –  Jan 16 '21 at 11:17