CSS - grid-column-end

CSS 的grid-column-end属性通过指定行、跨度或依赖自动放置来确定网格项应结束的列。它定义了网格区域的块末端边缘。

语法

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

属性值

值	描述
auto	它自动确定网格项在网格布局中的位置。默认跨度为 1。
span n	它指定元素占用的列数空间。
column-line	它指定元素显示必须结束的列。

CSS 网格列结束属性示例

以下示例说明了使用不同值的grid-column-end属性。

使用 Auto 值的网格列结束属性

为了允许网格项根据项目内容和网格布局在默认位置结束，我们使用auto值。它根据项目需要多少空间以及它在网格中的当前位置自动调整结束线。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 3px solid blue;
         padding: 20px;
         text-align: center;
         color: white;
         grid-column-end: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column-end property
   </h2>
   <h4>
      grid-column-end: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

使用跨度值的网格列结束属性

为了使网格项从其起始线开始并跨越 n 个列，我们使用 span 指定列数（例如 span 2 - 元素从起始线跨越 2 列）。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }

      .items {
         border: 3px solid blue;
      }

      .item1 {
         grid-column-end: span 2;
      }

      .item3 {
         grid-column-end: span 3;
      }

      .item5 {
         grid-column-end: span 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column-end property
   </h2>
   <h4>
      grid-column-end: span 2 (item1),
      span 3 (item3), span 4 (item5)
   </h4>
   <p>
      item1- the element takes 
      2 columns space
   </p>
   <p>
      item3- the element takes 
      3 columns space
   </p>
   <p>
      item5- the element takes 
      4 columns space
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

使用列号的网格列结束属性

为了显式地将网格项的结束线设置在某个列号上，无论起始线在哪里，项目都应在此结束，我们指定列号（例如 4 - 元素必须显示到第 3 列）。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }

      .items {
         border: 3px solid blue;
      }

      .item1 {
         grid-column-end: 3;
      }

      .item3 {
         grid-column-end: 4;
      }

      .item5 {
         grid-column-end: 5;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column-end property
   </h2>
   <h4>
      grid-column-end: 3 (item1),
      4 (item3), 5 (item5)
   </h4>
   <p>
      item1- the display of the
      item ends at column 2
   </p>
   <p>
      item3- the display of the 
      item ends at column 3
   </p>
   <p>
      item5- the display of the 
      item ends at column 4
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

支持的浏览器

属性
grid-column-end	57	16	52	10	44

css_properties_reference.htm

打印页面