我试图通过CSS网格布局实现以下目标:
A A
B B B B B B B B
C C E E E E E
D D D
F F F
我可以在HTML中添加类,但不能重新排序元素或添加包装元素。
通过使用显式
grid-row
价值观是否可以从第四列开始定位最后两行
没有明确指定
grid-column
每个元素的单独属性
?(为了简洁起见,我在这里将其保留为6,但实际布局中还有更多)
这是我到目前为止的情况。如您所见,两行
E
和
F
从第1列开始。
我可以添加
grid-column: 4
到
.c13
但行中的后续元素会流回第1列。
.grid {
display: grid;
grid-template-rows: repeat(5, 2em);
grid-gap: 0.5em;
text-align: center;
}
.c2 {
grid-column: 8;
}
.c16 {
grid-column: 4;
}
.extra1 {
grid-row: 4;
}
.extra2 {
grid-row: 5;
}
.global1 { background-color: #ccc; }
.intra1 { background-color: lightblue; }
.intra2 { background-color: yellow; }
.intra3 { background-color: purple; color: white; }
.extra1 { background-color: orange; }
.extra2 { background-color: #f66; }
<p>You need a browser that supports CSS Grid Layout for this.</p>
<section class='grid'>
<div class='c1 global1'>A</div>
<div class='c2 global1'>A</div>
<div class='c3 intra1'>B</div>
<div class='c4 intra1'>B</div>
<div class='c5 intra1'>B</div>
<div class='c6 intra1'>B</div>
<div class='c7 intra1'>B</div>
<div class='c8 intra1'>B</div>
<div class='c9 intra1'>B</div>
<div class='c10 intra1'>B</div>
<div class='c11 intra2'>C</div>
<div class='c12 intra2'>C</div>
<div class='c13 extra1'>D</div>
<div class='c14 extra1'>D</div>
<div class='c15 extra1'>D</div>
<div class='c16 intra3'>E</div>
<div class='c17 intra3'>E</div>
<div class='c18 intra3'>E</div>
<div class='c19 intra3'>E</div>
<div class='c20 intra3'>E</div>
<div class='c21 extra2'>F</div>
<div class='c22 extra2'>F</div>
<div class='c23 extra2'>F</div>
</section>
