Using Css Grid Why Im Getting This Gap?

Im learning CSS GRID and I dont know why Im getting a gap in the following example. The second item could fit in the first track but instead Im getting a gap there. Here is the cod

Solution 1:

You need to understand the placement algorithm to understand this behavior. From the specification you can find the full algorithm and how to identify when each item will be treated which is the key here to understand the difference between both cases.

The main steps of the algorithm are:

0. Generate anonymous grid items

1. Position anything that’s not auto-positioned.

2. Process the items locked to a given row.

3. Determine the columns in the implicit grid.

4. Position the remaining grid items.

Let's start with your last example where you explicitely defined a grid-columandgrid-row for the first item which make it a not auto-positioned element so we place it at the step (1).

Then we will go to step (4) to position the remaining items

The auto-placement cursor defines the current “insertion point” in the grid, specified as a pair of row and column grid lines. Initially the auto-placement cursor is set to the start-most row and column lines in the implicit grid.

So our cursor is the top/left cell and the item2 will be placed there and we simply follow the tree order to place all the other element:

For each grid item that hasn’t been positioned by the previous steps, in order-modified document order:

Of course, no item will overlap the item1 already placed and we keep incrementing the cursor for each item following the algorithm.

---

Now let's consider the first tricky case where the only difference is that you didn't specify the grid-row and this will no more make your element a not auto-positioned one because you only defined the grid-column so the row will be automatically defined and the item will now fall into the step (4) and if you check closely the step (4) you will find two sub steps:

If the item has a definite column position:

If the item has an automatic grid position in both axes:

The item1 will consider the first one, will get placed in the second column and will increment the cursor!. The incrementation of the cursor is what make the second element placed after.

In your second example the item1 will not use the cursor since it's considered in the step (1) so the item2 will be the first to use the cursor unlike in your first example where item1 will be the first one to use it.

Worth to note that in the step (4) we have two kind of algorthim. The "sparse" one (the default behavior) where we never reset the cursor and we always increment it which create gaps. The "dense" algorithm that reset the cursor at each step in order to fill all the cells. To activate the "dense" algorithm you need to consider grid-auto-flow

.container {
  display: grid;
  margin: 40px;
  grid-gap: 20px;
  text-align: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: dense;
}

.containerdiv {
  background: #ff8000;
}

.container.item1 {
  grid-column: 2/4;
}

<divclass="container"><divclass="item1">1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>

dense

If specified, the auto-placement algorithm uses a “dense” packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.

If omitted, a “sparse” algorithm is used, where the placement algorithm only ever moves “forward” in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear “in order”, even if this leaves holes that could have been filled by later item

---

Related question with another non-intuitive behavior explained with the same algorithm: CSS Grid : How Auto placement algorithm works

Solution 2:

Change the .item1grid-column to 1/3, like this:

grid-column: 1 / 3;

Basically it means it starts in column 1 and ends in column 3. Not starting in column 2 and ending in column 4, like in your example.

.container {
    display: grid;
    margin: 40px;
    grid-gap: 20px;
    text-align: center;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.containerdiv {
    background: #ff8000;

}

.container.item1 {
    grid-column: 1/3;
    grid-row: 1/2;

}

<divclass="container"><divclass="item1">1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>

Solution 3:

Why are you even adding grid-template-column and grid-template-row ? When you can simply add justify-items: center; and align-items: center;