在CSS中有没有可能使用命名的网格区域,例如grid-area: 'a'
,而不必声明每一个?
我想在grid-template-areas
声明中使用它。
.manSection {
display: grid;
height: 700px;
width: 200px;
grid-template-areas:
". a ."
"b . c"
". d ."
". e ."
". f ."
"k . g"
"r . p"
". h .";
row-gap: 10px;
}
<section class="manSection">
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
<span>Hi</span>
</section>
1条答案
按热度按时间qhhrdooz1#
不幸的是,这似乎不可能与当前的CSS。
您可以编写一个sass函数来循环遍历每个span,并使用
:nth-child()
选择器为它提供一个网格区域,但这仍然会导致相同的CSS。我认为counters可能会自动遍历每个span并指定一个显式的网格区域,尽管grid area属性不接受字符串值,因此与计数器不兼容。