我最近回答了一个关于 CSS 网格的问题。
但在我的回答中，我使用了一种有效的风格，但与我认为的标准方式相反。
看看下面的代码片段。
红细胞具有以下样式：
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>
但它无法转到第 4 列。
然而，我将其悬停在其上，风格
grid-column: 3 / 5;
会将其扩展到第 4 列
我认为这是一个错误，但 Chrome 和 FF 是一致的。
那么，一定有什么我不明白的地方。
这只是对价值观的误解grid-column财产的意思。
网格由线分隔。和grid-column: 3 / 4;表示该项目从第三行开始，到第四行结束。这并不意味着该项目将跨越第三列和第四列。我很快就想象出lines以及以下代码片段中相应的计数器。
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
