css网格-行和网格-列
css网格-行和网格-列
提问于 2018-06-06 00:14:17
您好，我正在学习css网格，但我不能理解这个结果。我将span-row-3类与grid-row: span 3一起使用；当我单独使用它时，它与第1项类似，但当我将它与span-col-3一起使用时，它不再像第6项那样工作
有什么原因导致我的grid-row: span 3；不能在这里工作吗
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.span-col-3{grid-column: span 3;}
.span-row-3{grid-row: span 3;}
.grid div {
font-weight: 300;
font-size: .8rem;
line-height: 1.2;
text-align: left;
position: relative;
background: #302742;
border-left: 2px solid #ffffff4d;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 2px solid transparent;
padding: 2rem 1rem;
color: #ffffff80;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<div class="grid">
<div class="span-row-3">Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div class="span-col-3 span-row-3">Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-06 00:26:42
一切运行正常-问题是行的高度不相等。设置grid-auto-rows以指定网格行的大小：
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-gap: 10px;
}
.span-col-3 {
grid-column: span 3;
}
.span-row-3 {
grid-row: span 3;
}
.grid div {
font-weight: 300;
font-size: .8rem;
line-height: 1.2;
text-align: left;
position: relative;
background: #302742;
border-left: 2px solid #ffffff4d;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 2px solid transparent;
padding: 2rem 1rem;
color: #ffffff80;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<div class="grid">
<div class="span-row-3">Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div class="span-col-3 span-row-3">Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
</div>
Stack Overflow用户
发布于 2018-06-06 00:22:00
您错过了item1的"span-col-3“
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.span-col-3{grid-column: span 3;}
.span-row-3{grid-row: span 3;}
.grid div {
font-weight: 300;
font-size: .8rem;
line-height: 1.2;
text-align: left;
position: relative;
background: #302742;
border-left: 2px solid #ffffff4d;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 2px solid transparent;
padding: 2rem 1rem;
color: #ffffff80;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="grid">
<div class="span-col-3 span-row-3">Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div class="span-col-3 span-row-3">Item 6</div>
<div>Item 7</div>
<div>Item 8</div>
<div>Item 9</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50704666
复制相关文章
相似问题