使用显示属性GRID的网格列线

Question

在这里，我想了解这段代码中grid-column-start和grid-column-end指定了什么？

这是我代码的HTML部分。

<div class="grid-container">
<div class="grid-item1">1</div>
<div class="grid-item2">2</div>
<div class="grid-item3">3</div>  
<div class="grid-item3">4</div>
<div class="grid-item5">5</div>
<div class="grid-item6">6</div>  
<div class="grid-item7">7</div>
<div class="grid-item8">8</div>
<div class="grid-item9">9</div>  

这是我代码的CSS部分。

.grid-container 
 {
 display: grid;
 grid-template-columns: 100px 100px 100px;
 grid-gap : 50px;
 background-color: black;
 padding: 10px;
 }
 div 
 {
 background-color: rgba(255, 255, 255, 0.8);
 border: 1px solid rgba(0, 0, 0, 0.8);
 padding: 15px;
 font-size: 30px;
 text-align: center;
 }
.grid-item1
{
grid-column-start : 1 ;
grid-column-end : 3;
}

这是代码的输出。 那么，grid-column-end在这里指定了什么？

Answer 1

grid-column-start属性定义了项目将在哪一列开始。 和

grid-column-end属性定义一个项目将跨越多少列，或者该项目将在哪一列行结束。

请在下面的两个示例中进行查看：1-grid-column-start 2-{{​​3}}

Answer 2

因此，它的基本作用是，当您给出grid-column-start : 1| grid-column-end : 3时。该列将从位置1开始，一直到第3列。

此方法的简写方法是grid-column: 1 / 3;，它从1开始到第3列结束，这将使其他列移动。

在此处查看示例：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column

希望这会有所帮助。

Answer 3

要了解 grid-template-column 属性的作用，请检查Chrome DevTools并检查“ grid-item1”。较短的方法是：grid-column: 1/3;-div跨越两列；从第一行开始到第三行结束-> | col | col | 建议不要使用 grid-template-columns 属性中的像素，而应避免使用非响应性： grid-template-columns: repeat(12/1fr); 要么 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr);