语法
grid-column-start: auto | span n | column-line | initial | inherit;
grid-column-start 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-start: 6;
}
</style>
</head>
<body>
<h2>Grid-column-start 属性示例</h2>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
结果
其中我们指定了项目（item）（item）的显示应该从哪一列开始。
在以下示例中，我们指定了项目（item）（item）将跨越的列数。
指定为“span 2”的 grid-column-start 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.span-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #888;
padding: 10px;
margin-top: 20px;
}
.span-container > div {
background-color: #fff;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.span-box1 {
grid-column-start: span 2;
}
</style>
</head>
<body>
<h2>Grid-column-start 属性示例</h2>
<div class="span-container">
<div class="span-box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
具有“auto”值的 grid-column-start 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: #666;
padding: 10px;
}
.grid-container > div {
background-color: #ccc;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.box1 {
grid-column-start: auto;
}
</style>
</head>
<body>
<h2>Grid-column-start 属性示例</h2>
<div class="grid-container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</div>
</body>
</html>
具有“column-line”值的 grid-column-start 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 12px;
background-color: red;
padding: 15px;
}
.grid-container>div {
background-color: #dcdcdc;
text-align: center;
padding: 20px 0;
font-size: 35px;
color: white;
}
.box1 {
grid-column-start: 4;
}
</style>
</head>
<body>
<h1> Grid-column-start Property </h1>
<div class="grid-container">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
CSS grid-column-start 属性值说明
| 值 | 描述 |
|---|---|
| auto | 只跨越一列。这是此属性的默认值。 |
| span n | 指定项目（item）（item）将跨度的列数。 |
| column-line | 指定项目（item）（item）显示的列应该启动的列。 |
grid-column-start 属性通过添加一条线、一个跨度或者什么都不添加来指定列中项目（item）（item）的开始位置。
换句话说，它定义了其网格区域的块起始位置。
| 初始值 | auto |
|---|---|
| 应用于 | 网格项目（item）（item）。 |
| 继承 | 无效 |
| 可动画的 | 是的。起点是可以动画的。 |
| 版本 | CSS网格布局模块级别1 |
| DOM 语法 | object.Style.GridColumnStart =“6”; |
日期：2020-06-02 22:14:33 来源：oir作者：oir