CSS grid-column-end 属性
CSS grid-column-end
CSS grid-column-end 属性用于设置 Grid 布局中一个元素的结束列。它定义了一个元素在网格容器中的列跨度,它可以接受一个数字、一个关键字,或者一个函数。
语法
grid-column-end: <line> | <span> | <name> | auto | <function>
<line>
:表示结束列为具体的网格线编号,可以是正数、负数、或者0值。<span>
:表示跨越多少行。如果该值大于所有行的数量,该元素会跨越该网格中的所有行。<name>
: 表示结束在命名网格线上。auto
:表示自动计算元素的结束列。如果该值为默认值,元素会站在下一个空格子上或者网格的下一个轨道线上。<function>
:表示一个正体或负体定义跨度与结束方案。
值
- 值必须是
<line>
,<span>
,<name>
,auto
或<function>
中的其中之一。 - 如果该值是
<line>
或者span
,它还可以接受一个正数、负数和0。 - 如果该值是
<name>
,必须是一个已经被定义的命名网格线。 - 如果该值是
<function>
,它必须是 minmax(),fit-content() 或 repeat() 函数。这些函数的详细说明请参见下面的内容。
示例
例1.
CSS:
.item{
grid-column-end: span 3;
}
HTML:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
效果:
此处我们设置所有的 item 都跨3列。
例2.
CSS:
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 50px;
grid-gap: 10px;
}
.item{
grid-row: 1/3;
grid-column-end: 4;
}
HTML:
<div class="container">
<div class="item">1</div>
<div>2</div>
<div class="item">3</div>
<div>4</div>
<div class="item">5</div>
<div>6</div>
</div>
效果:
此处我们设置所有 item 的行实际上跨越所有的行,而列跨度为4。
例3.
CSS:
.container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 50px;
grid-gap: 10px;
}
.item{
grid-row: 1/3;
grid-column-end: span 2;
}
HTML:
<div class="container">
<div class="item">1</div>
<div>2</div>
<div class="item">3</div>
<div>4</div>
<div class="item">5</div>
<div>6</div>
</div>
效果:
此处我们设置所有 item 的列跨度为2。
例4.
CSS:
.container{
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: 50px;
grid-gap: 10px;
}
.item{
grid-row: 1;
grid-column-end: repeat(3, 1fr);
}
HTML:
<div class="container">
<div class="item">1</div>
</div>
效果:
此处我们设置 item 的列跨度为repeat(3, 1fr)
,即重复三次 1fr。由于设置只有一个 item,它会占据所有列,等分空间。
minmax() 函数的使用
minmax() 函数可以设置列的最小值和最大值。实际上它是一个缩写冒号,适用于最小和最大值相等的情况。
语法是:minmax(<min>, <max>)
,其中 <min>
和 <max>
表示该列的最小和最大宽度。
例如,
CSS:
.container{
display: grid;
grid-template-columns: repeat(3, minmax(60px, 1fr));
grid-template-rows: repeat(3, 50px);
grid-gap: 10px;
}
.item{
grid-column-end: span 2;
}
HTML:
<div class="container">
<div class="item">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="item">5</div>
<div class="item">6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
效果:
我们设置了三列的最小宽度为60像素。同时,让两个 item 得以跨越两列。
repeat() 函数的使用
repeat() 函数可以重复某些列模式。语法是 repeat(<n>, <pattern>)
。其中 <n>
表示重复的次数,<pattern>
表示列的模式。
例如,
CSS:
.container{
display: grid;
grid-template-columns: repeat(5, repeat(2,10% 40%) 10%)
}
HTML:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
效果:
此处我们设置了重复5次的五列,其中5%、5%、10%、40%、5%、10%、40%的重复。