html – CSS GRID – 网格模板区域,包含空单元格和自动放置

概述我正在尝试使用css网格布局模块来显示12列 – 3行网格. 我需要让第一行只显示2个元素(第一行在网格的左侧,第二行在右侧). 我使用10个周期将它们与空单元分开. 然后我需要以下行自动显示剩余的元素. 我决定使用网格模板区域来更好地控制定位,但可能不是最好的方法,因为我似乎必须为所有元素提供特定的网格区域名称. 此外,当我尝试将自动网格区域属性用于剩余单元格以便它们可以自动填充第3行时,它们似 我正在尝试使用CSS网格布局模块来显示12列 – 3行网格.

我需要让第一行只显示2个元素(第一行在网格的左侧,第二行在右侧).
我使用10个周期将它们与空单元分开.

然后我需要以下行自动显示剩余的元素.

我决定使用网格模板区域来更好地控制定位,但可能不是最好的方法,因为我似乎必须为所有元素提供特定的网格区域名称.

此外,当我尝试将自动网格区域属性用于剩余单元格以便它们可以自动填充第3行时,它们似乎填充了第一行中的空单元格.

解决这个问题最有效的方法是什么？

这是我的代码：

.grID {  display: grID;  grID-template-areas:   	"elem1 . . . . . . . . . . elem2"   	"elem3 elem4 elem5 elem6 elem7 elem8 elem9 elem10 elem11 elem12 elem13 elem14";}.elem{	text-align: center;	color: white;}.elem1 {  background-color: blue;  grID-area: elem1;}.elem2 {  background-color: red;  grID-area: elem2;}.elem3 {  background-color: cyan;  grID-area: elem3;}.elem4 {  background-color: green;  grID-area: elem4;}.elem5 {  background-color: magenta;  grID-area: elem5;}.elem6 {  background-color: blue;  grID-area: elem6;}.elem7 {  background-color: red;  grID-area: elem7;}.elem8 {  background-color: cyan;  grID-area: elem8;}.elem9 {  background-color: green;  grID-area: elem9;}.elem10 {  background-color: magenta;  grID-area: elem10;}.elem11 {  background-color: blue;  grID-area: elem11}.elem12 {  background-color: red;  grID-area: elem12;}.elem13 {  background-color: cyan;  grID-area: elem13;}.elem14 {  background-color: green;  grID-area: elem14;}.elem15 {  background-color: magenta;  grID-area: auto;}.elem16 {  background-color: green;  grID-area: auto;}.elem17 {  background-color: magenta;  grID-area: auto;}.elem18 {  background-color: cyan;  grID-area: auto;}.elem19 {  background-color: magenta;  grID-area: auto;}.elem20 {  background-color: blue;  grID-area: auto;}

<div >  <div >    elem1  </div>  <div >    elem2  </div>  <div >    elem3  </div>   <div >    elem4  </div>  <div >    elem5  </div>  <div >    elem6  </div>  <div >    elem7  </div>  <div >    elem8  </div>  <div >    elem9  </div>  <div >    elem10  </div>  <div >    elem11  </div>  <div >    elem12  </div>  <div >    elem13  </div>  <div >    elem14  </div>  <div >    elem15  </div>  <div >    elem16  </div>  <div >    elem17  </div>  <div >    elem18  </div>  <div >    elem19  </div>  <div >    elem20  </div></div>

非常感谢

解决方法 只需利用默认的grID-auto-flow：row属性,并使用grID-column告诉“1st row-right”div开始/结束的位置.

那么你根本不需要网格区域.

结果：

.grID {  display: grID;  grID-template-columns: repeat(12,1fr);  grID-auto-flow: row; /*typo corrected*/}.elem {  text-align: center;  color: white;}.elem1 {  background-color: blue;}.elem2 {  background-color: red;  grID-column: 12/13;}.elem3 {  background-color: cyan;}.elem4 {  background-color: green;}.elem5 {  background-color: magenta;}.elem6 {  background-color: blue;}.elem7 {  background-color: red;}.elem8 {  background-color: cyan;}.elem9 {  background-color: green;}.elem10 {  background-color: magenta;}.elem11 {  background-color: blue;}.elem12 {  background-color: red;}.elem13 {  background-color: cyan;}.elem14 {  background-color: green;}.elem15 {  background-color: magenta;}.elem16 {  background-color: green;}.elem17 {  background-color: magenta;}.elem18 {  background-color: cyan;}.elem19 {  background-color: magenta;}.elem20 {  background-color: blue;}

<div >  <div >    elem1  </div>  <div >    elem2  </div>  <div >    elem3  </div>  <div >    elem4  </div>  <div >    elem5  </div>  <div >    elem6  </div>  <div >    elem7  </div>  <div >    elem8  </div>  <div >    elem9  </div>  <div >    elem10  </div>  <div >    elem11  </div>  <div >    elem12  </div>  <div >    elem13  </div>  <div >    elem14  </div>  <div >    elem15  </div>  <div >    elem16  </div>  <div >    elem17  </div>  <div >    elem18  </div>  <div >    elem19  </div>  <div >    elem20  </div></div>

总结

以上是内存溢出为你收集整理的html – CSS GRID – 网格模板区域,包含空单元格和自动放置全部内容，希望文章能够帮你解决html – CSS GRID – 网格模板区域,包含空单元格和自动放置所遇到的程序开发问题。

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