小码哥的IT人生

CSS grid-column-start 属性 详解

css3基础 2022-07-14 16:28:44小码哥的IT人生shichen

CSS grid-column-start 属性

定义和用法

grid-column-start 属性定义项目将在哪条列线上开始。

另请参阅:

CSS 教程:CSS 网格布局

CSS 参考手册:grid-column 属性

CSS 参考手册:grid-column-end 属性

CSS 参考手册:grid-row-start 属性

CSS 参考手册:grid-row-end 属性

实例

使 "item1" 从列 2 开始:

.item1 {
  grid-column-start: 2;
}

 

完整实例【亲自试一试】:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item1 {
  grid-column-start: 2;
}
</style>
</head>
<body>
<h1>grid-column-start 属性</h1>
<p>请使用 <em>grid-column-start</em> 属性来规定在哪个列上开始显示项目。</p>
<p>Item1 会在列 2 上开始:</p>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

CSS 语法

grid-column-start: auto|span n|column-line;

属性值

描述
auto 默认值。项目将随着流放置。
span n 规定项目将横跨的列数。
column-line 规定从哪列开始显示项目。

技术细节

默认值: auto
继承:
动画制作: 支持。请参阅:动画相关属性
版本: CSS Grid Layout Module Level 1
JavaScript 语法: object.style.gridColumnStart="3"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024