What does `span 1/ span 1` mean in CSS Grid?

Question

I am using Tailwind’s new CSS Grid feature. It has Grid Column with values span 1/span 1 for class col-span-1, span 2/ span 2 for class col-span-2 and so on until span 12/span 12 for class col-span-12.

I am however unable to understand span 1/ span 1 in practice. I can understand 1 / span 1. I can also understand span 1/ 3 but can’t seem to grasp span 1/ span 1.

Ines

span 1/ span 1 is simply equal to span 1 because start and end are equal: If the start line is equal to the end line, remove the end line (w3.org/TR/css-grid-1/#grid-placement-errors) – Nestor

Thank you for If the start line is equal to the end line, remove the end line. This makes it so much clear :) – Ines

Answer 1

While asking the question, I was tinkering with the following CodePen and I seem to have found the solution.

<div class="grid grid-cols-3 gap-3 bg-gray-300">
    <div class="bg-green-500 text-white text-6xl flex items-center justify-center border-8 border-black col-span-1">1</div>
    <div class="bg-indigo-500 text-white text-6xl flex items-center justify-center border-8 border-black">2</div>
    <div class="bg-red-500 text-white text-6xl flex items-center justify-center border-8 border-black">3</div>
    <div class="bg-yellow-500 text-white text-6xl flex items-center justify-center border-8 border-black">4</div>
</div>

The above HTML assumes you have Tailwind CSS linked. It shows the following output -

Notice, the col-span-1 in 1. col-span-1 refers to span 1 / span 1.

Now let’s change the code to the following:

<div class="grid grid-cols-3 gap-3 bg-gray-300">
    <div class="bg-green-500 text-white text-6xl flex items-center justify-center border-8 border-black col-span-2">1</div>
    <div class="bg-indigo-500 text-white text-6xl flex items-center justify-center border-8 border-black">2</div>
    <div class="bg-red-500 text-white text-6xl flex items-center justify-center border-8 border-black">3</div>
    <div class="bg-yellow-500 text-white text-6xl flex items-center justify-center border-8 border-black">4</div>
</div>

1 contains col-span-2 which is span 2 / span 2. It makes it cover 2‘s space as well.

The output looks as follows:

If we put col-span-4 in 1, it won’t work as we have specified the Grid to be of Column 3 in the parent div with grid-cols-3. Other than that, span covers space from where it starts.

Ines

If we put col-span-4 in 1, it won’t work --> it will work and it will generate and implicit column to make your grid with 4 columns:jsfiddle.net/m8y2nszj .. look closely to the right edge to notice the gap and if you inspect the code you will see an extra empty column – Nestor

Thank you @TemaniAfif, it does create an implicit grid. I saw this with the Firefox DevTools. The number increased to 5. Although, I didn’t notice any gap :) Edit: Nevermind I increased rows from 4 to 6 & can clearly see 5 on the 2nd row :) – Ines

Answer 2

Your accepted answer doesn't really explain what's going on. Temani Afif said in the comments, 'span 1 / span 1 is simply equal to span 1'. That is true, but it doesn't explain the purpose of Tailwind’s code, which is what your question seems to be asking.

So let's consider the span 2 / span 2 example. This is the value of the grid-column property, which is just shorthand for the grid-column-start and grid-column-end properties. It could also be written like this:

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

The 'Grid Placement Conflict Handling' section of the specs says:

If the placement contains two spans, remove the one contributed by the end grid-placement property.

So that code, when considered in isolation, is equivalent to:

grid-column-start: span 2;

That works okay if you don't specify a start line for the grid item. But let's say you need to make the item start from the third line… You could set grid-column-start to 3, but now you've overridden the previous value of span 2. What you're really wanting to say is this:

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

The reverse is true if you want to set its position from the right edge of the grid. Then you might say:

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

A utility framework like Tailwind can't possibly know which end you want to position the cell from, so it covers its bases and defines both up front:

grid-column: span 2 / span 2;

Now, you can overwrite either of these properties with an integer (representing position), or you can just leave it as, and the grid-column-end value is simply ignored.

Phone