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%的重复。