html – 如何防止网格行跨度更改列位置？

概述我有一个3 X 3 CSS Grid. 我有一排我有三个项目A,B& C. 我希望项目C的行数为2. 为此,我使用grid-row：1 / span 2;.这是两行,但它被放置在第一列而不是简单地位于第三列.我不知道为什么会这样. 我希望项目C保留在HTML中的位置. 解决这个问题的一个方法是明确设置grid-column：3 / span 1,我不想这样做.我希望项目的放置方式与HTML格式相同 我有一个3 X 3 CSS Grid.

我有一排我有三个项目A,B& C.

我希望项目C的行数为2.

为此,我使用grID-row：1 / span 2;.这是两行,但它被放置在第一列而不是简单地位于第三列.我不知道为什么会这样.

我希望项目C保留在HTML中的位置.

解决这个问题的一个方法是明确设置grID-column：3 / span 1,我不想这样做.我希望项目的放置方式与HTML格式相同.

有没有办法抑制这种行为？

.grID-container {  display: grID;  grID-template-columns: repeat(3,1fr);  grID-template-rows: repeat(3,1fr);}h1 {  border: 2px solID;  padding: 0;  @R_502_5553@: 0;  Font-size: 20px;}.a {  grID-row: 1 / span 2;  background: orange;}

<div >  <div>    <h1>A</h1>  </div>  <div>    <h1>B</h1>  </div>  <div >    <h1>C</h1>  </div></div>

解决方法 另一种解决方法(指出为什么要为其他项目说明一行)：

.grID-container {  display: grID;  grID-template-columns: repeat(3,1fr);}h1 {  border: 2px solID;  padding: 0;  @R_502_5553@: 0;  Font-size: 20px;}.a {  grID-row: 1 / span 2;  background: orange;}.b {  grID-row: 1;}

<div >  <div >    <h1>A</h1>  </div>  <div >    <h1>B</h1>  </div>  <div >    <h1>C</h1>  </div></div>

这种行为的原因是限制性更强的元素首先被定位.这样,网格算法实现解决方案的可能性就更大.

也就是说,具有需求的元素将首先定位,最后没有需求的元素.

此part of the spec中的步骤2(对于项目)和4(对于其余项目)

总结

以上是内存溢出为你收集整理的html – 如何防止网格行跨度更改列位置？全部内容，希望文章能够帮你解决html – 如何防止网格行跨度更改列位置？所遇到的程序开发问题。

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