我有一个网格，基本上我需要能够在容器代码中定义项目的位置，为了更清楚，下面是我当前的代码：
<style>
.angry-grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
gap: 0px;
height: 100%;
}
#item-0 {
background-color: #689779;
grid-row-start: 1;
grid-column-start: 3;
grid-row-end: 2;
grid-column-end: 4;
}
#item-1 {
background-color: #9D7F5B;
grid-row-start: 2;
grid-column-start: 5;
grid-row-end: 3;
grid-column-end: 6;
}
#item-2 {
background-color: #C756BB;
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 3;
grid-column-end: 2;
}
#item-3 {
background-color: #BDE79B;
grid-row-start: 3;
grid-column-start: 4;
grid-row-end: 4;
grid-column-end: 5;
}
#item-4 {
background-color: #5F97A5;
grid-row-start: 3;
grid-column-start: 2;
grid-row-end: 4;
grid-column-end: 3;
}
</style>
<div class="angry-grid">
<div id="item-0"> </div>
<div id="item-1"> </div>
<div id="item-2"> </div>
<div id="item-3"> </div>
<div id="item-4"> </div>
</div>我需要在容器代码（myGrid {...}）中定义项的位置，我希望它足够清晰。
在这个例子中，它应该看起来像这样：
2条答案
按热度按时间envsm3lx1#
你不能。CSS使用选择器来选择元素，CSS的任何部分都没有使用规则集内的选择器。
最接近的方法是使用
grid-template-areasto name regions of the grid。您仍然需要为要放置在这些区域中的每个元素编写一个选择器。8i9zcol22#
正如quentin所说，最好的办法是使用grid-template-areas来定义子元素在网格布局中的位置。有多种在线资源可帮助您创建所需的布局。
我花了大约30秒的时间用这个工具创建这个布局：https://cssgrid-generator.netlify.app/
对于更高级的布局，我通常使用这个：https://grid.layoutit.com/