html – CSS网格空单元格布局问题

概述我正在尝试使用CSS网格制作周期表.要做到这一点,我需要多行中的空单元格 – 我正在尝试使用此处显示的文档来实现： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas HTML <div class="wrapper"> <div class="element">El</d 我正在尝试使用CSS网格制作周期表.要做到这一点,我需要多行中的空单元格 – 我正在尝试使用此处显示的文档来实现： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas

HTML

<div >    <div >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 ><div ></div><div ></div><div ></div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >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 ><div ></div><div ></div><div ></div><div ></div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div><div >El</div></div>

总结

以上是内存溢出为你收集整理的html – CSS网格空单元格布局问题全部内容，希望文章能够帮你解决html – CSS网格空单元格布局问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。