我想使用CSS网格一个特定的容器。但是有一个直接的后代我不想用作网格项。有没有财产或方法来做到这一点?我不想更改HTML中的位置。
h2元素我不想用作网格项。
<article id="main-diagram"> //CSS grid
<h2>Ingescheven ouders</h2> // this is the descendant
<ul id="diagram-times">
<li>18:00</li>
<li>19:00</li>
<li>20:00</li>
<li>21:00</li>
</ul>
<section class="main-diagram-1">
<p>30%</p>
</section>
<section class="main-diagram-2">
<p>40%</p>
</section>
<section class="main-diagram-3">
<p>50%</p>
</section>
<section class="main-diagram-4">
<p>60%</p>
</section>
<ul id="diagram-places">
<li>12/30</li>
<li>14/32</li>
<li>10/20</li>
<li>32/33</li>
</ul>
</article>
谢谢!
ps:还没有css
您可以使用css属性grid-template-areas:
指定应显示哪些元素以及位置。
使用代码的示例:
#diagram-times {grid-area: topleft}
.main-diagram-1 {grid-area: topright;}
.main-diagram-2 {grid-area: botleft;}
.main-diagram-3 {grid-area: botright;}
.container {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: auto;
grid-template-areas:
"topleft topright"
"botleft botright"
}