我正在尝试使用CSS网格制作周期表.要做到这一点,我需要多行中的空单元格 – 我正在尝试使用此处显示的文档来实现：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas
HTML
<div class="wrapper">
<div class="element">El</div>
//repeated 90 times
</div>
CSS
.element {
grid-area: el;
}
.wrapper {
display: grid;
grid-template-columns: repeat(18,1fr);
grid-template-areas:
'el . . . . . . . . . . . . . . . . el'
'el el . . . . . . . . . . el el el el el el'
'el el . . . . . . . . . . el el el el el el'
'el el el el el el el el el el el el el el el el el el'
'el el el el el el el el el el el el el el el el el el'
'el el . el el el el el el el el el el el el el el el'
'el el . el el el el el el el el el el el el el el el';
}
但是,渲染时,似乎所有东西都在右上方聚集,如下所示：https://jsfiddle.net/agreyfield91/9qnwv16u/9/.为什么会这样？
解决方法
它们没有聚集在右上方,它们聚集在最右边的列上.
网格区域必须是矩形,而不是任何其他形状.可悲的是,周期表的布局不是矩形.
网格区域必须是矩形,而不是任何其他形状.可悲的是,周期表的布局不是矩形.
此外,设置元素的网格区域将使其覆盖整个区域,而不仅仅是它的一个单元格.
这会导致元素向右聚集,因为最后一列确实形成一个矩形.
如果你想自动布局元素,你可以采用逆方法,并定义一堆“空白”矩形区域,并在那里放置一些元素,以便它们被排除在自动流程之外.
这样一个例子：
/*
backgrounds and spacings not needed,just there to
enhance visualization of each element's boundaries.
*/
.element {
margin: 2px;
padding: 5px;
border: 1px solid gray;
}
.spacerA {
background: dodgerblue;
grid-area: wa;
}
.spacerB {
background: aqua;
grid-area: wb;
}
.spacerC {
background: skyblue;
grid-area: wc;
}
.wrapper {
display: grid;
grid-template-columns: repeat(18,1fr);
grid-template-areas:
'. wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa .'
'. . wb wb wb wb wb wb wb wb wb wb . . . . . .'
'. . wb wb wb wb wb wb wb wb wb wb . . . . . .'
'. . . . . . . . . . . . . . . . . .'
'. . . . . . . . . . . . . . . . . .'
'. . wc . . . . . . . . . . . . . . .'
'. . wc . . . . . . . . . . . . . . .';
}
<div class="wrapper"> <div class="spacerA"></div> <div class="spacerB"></div> <div class="spacerC"></div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> </div>
你也可以使用相同的spacer思路获得一个空行：
/*
backgrounds and spacings not needed,just there to
enhance visualization of each element's boundaries.
*/
.element {
margin: 2px;
padding: 5px;
border: 1px solid gray;
}
.spacerA {
background: dodgerblue;
grid-area: wa;
}
.spacerB {
background: aqua;
grid-area: wb;
}
.spacerC {
background: skyblue;
grid-area: wc;
}
.spacerD {
background: green;
grid-area: wd;
height: 2em;
}
.wrapper {
display: grid;
grid-template-columns: repeat(18,1fr);
grid-template-areas:
'. wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa wa . '
'. . wb wb wb wb wb wb wb wb wb wb . . . . . . '
'. . wb wb wb wb wb wb wb wb wb wb . . . . . . '
'. . . . . . . . . . . . . . . . . . '
'. . . . . . . . . . . . . . . . . . '
'. . wc . . . . . . . . . . . . . . . '
'. . wc . . . . . . . . . . . . . . . '
'wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd wd';
}
<div class="wrapper"> <div class="spacerA"></div> <div class="spacerB"></div> <div class="spacerC"></div> <div class="spacerD"></div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> <div class="element">El</div> </div>
