html - 使用显示属性 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- grid-column-end