Understanding the grid-column property

问题

I recently answered a question about CSS grid.

But in my answer I used a style that worked, but against what I believe would be the standard way.

Take a look at the following snippet.

The red cell has this style:

grid-column: 3 / 4;

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-auto-flow: dense;
}

.cell {
  background: tomato;
  width: 100%;
  height: 100%;
}

.cell:nth-child(10n + 1) {
  background: red;
  grid-column: 3 / 4;  
  grid-row: span 2;
}


.cell:nth-child(10n + 1):hover {
  grid-column: 3 / 5;  /* strange behaviour */
}

.cell:nth-child(10n + 2),
.cell:nth-child(10n + 4) {
  background: papayawhip;
  grid-column: 2;

}

.cell:nth-child(10n + 6),
.cell:nth-child(10n + 8) {
  background: yellowgreen;
  grid-column: 4;
}

.cell:nth-child(10n + 7),
.cell:nth-child(10n + 9) {
  background: yellow;
  grid-column: 3;
}

.cell:nth-child(10n + 10) {
  background: lightblue;
  grid-column: 1 / 3;    /* strange behaviour */
  grid-row: span 2;

}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
  <div class="cell">17</div>
  <div class="cell">18</div>
  <div class="cell">19</div>
  <div class="cell">20</div>
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
</div>

But it fail to go to the 4 column.

I you hover it, however, the style

grid-column: 3 / 5;

will make it expand to the 4th column

I would believe this to be a bug, but Chrome and FF are consistent .

So, there must be something that I don't understand .

回答1:

It's simply a misunderstanding of what the values of the grid-column property mean.

A grid is separated by lines. And grid-column: 3 / 4; means that this item starts at the third line and ends at the fourth line. It does not mean that this item will span over the third and fourth column. I quickly visualized the lines with their corresponding counter in the following snippet.

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 0px;
  counter-reset: count;
}

.cell {
  position: relative;
  background: lightgrey;
  border-left: 3px solid orange;
}

.cell:last-child {
  border-right: 3px solid orange;
}

.cell:before {
  counter-increment: count;
  content: counter(count);
}

.cell:last-child:after {
  position: absolute;
  right: 0;
  counter-increment: count;
  content: counter(count);
}

<p>Setting <code>grid-column: 3 / 5;</code> on a cell will make this cell span from the third orange line to the fifth.</p>

<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

回答2:

As mentioned in another answer, grid-column: 3 / 4 means the grid area covers grid column lines three to four. In other words, it covers the third column alone.

You were apparently thinking that this rule would cover grid columns three and four. Actually, that's also possible in Grid:

grid-column: 3 / span 2
grid-column: 3 / 5

Keep in mind, in a four column grid, there are five grid column lines. In fact, in every grid the number of column / row lines is equal to the number of columns / rows + 1, because the last column / row has an extra (final) line.

Firefox offers a useful tool for seeing this.

In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid.

More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts

来源：https://stackoverflow.com/questions/44706536/understanding-the-grid-column-property

标签

css

css3

css-grid