CSS grid-column 属性
CSS grid-column 属性
CSS Grid Layout(CSS网格布局)是一种用于构建web页面的强大技术。其中,grid-column属性可用于指定元素要占用的网格列数,从而控制网格项在网格中的位置和长度。
语法
grid-column: <start-line> / <end-line> | <start-line> / span <value> | <line-name> / <line-name> | <line-name> / span <value>;
<start-line>
: 必需。指定要起始的网格线。<end-line>
: 可选。指定要结束的网格线。<value>
:可选。指定要占用的网格数。<line-name>
: 可选。以网格线的名称代替网格线内的数字。
属性值
使用网格线数值
grid-column: 1 / 3;
:指定元素要占用从第一列到第三列的所有列。grid-column: 2 / 4;
:指定元素要占用从第二列到第四列的所有列。grid-column: 1 / -1;
:指定元素要占用从第一列到最后一列的所有列。
使用 span 值
可以在 <end-line>
后面加上 span
值来表示元素要占用的列数。
grid-column: 1 / span 2;
:指定元素要占用第一列和第二列。grid-column: 2 / span 3;
:指定元素要占用第二列、第三列和第四列。
使用网格线名称
可以通过使用CSS变量或者Grid容器属性来指定行或者列的网格线的名称。
grid-template-columns: [one] 100px [two] 100px [three] 100px [four];
:定义了四个网格线,每一条网格线都被命名了。grid-column: one / four;
:指定元素要占用从 “one” 到 “four” 这四条网格线之间的列。
扩展属性
grid-column-start
grid-column-start: <start-line> | <line-name> | span <value> | auto;
该属性定义了元素的列起始位置。
grid-column-start: 2;
:从第二列开始。grid-column-start: span 3;
:跨越三列开始。grid-column-start: article;
:在 “article” 列起始位置开始。
grid-column-end
grid-column-end: <end-line> | <line-name> | span <value> | auto;
该属性定义元素的列结束位置。
grid-column-end: 4;
:在第四列结束。grid-column-end: span 2;
:跨越两列并在相对位置后结束。grid-column-end: footer;
:在 “footer” 列位置结束。
grid-column-gap
grid-column-gap: <length> | <percentage>;
该属性定义了列与列之间的间距。
grid-column-gap: 10px;
:列与列之间的间距是10像素。grid-column-gap: 5%;
:列与列之间的间距是它们的宽度的5%。
总结
CSS grid-column属性可以用于指定元素要占用的网格列数,从而控制网格项在网格中的位置和长度。可以使用网格线数值、span值、网格线名称等方式来指定列的位置和范围。同时,还可以使用 grid-column-start、grid-column-end、grid-column-gap 等属性来更加详细地控制网格布局。