CSS - grid-auto-columns 属性

上一页
下一页

CSS grid-auto-columns 属性定义隐式创建的网格列的宽度。如果网格项目放置在未由 grid-template-columns 显式设置尺寸的列中，则网格系统会创建隐式网格列来容纳它。如果使用 grid-template-columns，则此属性无效。

语法

grid-auto-columns: auto | length | percentage | max-content | min-content | minmax(min,max) | fit-content();

属性值

值 描述
auto 列的大小取决于容器的大小。默认值。
长度 使用长度单位设置列的大小。
百分比 使用百分比值设置列的大小。
max-content 列的大小取决于内容的长度。不会发生换行。
min-content 列的大小取决于内容的长度。会发生换行。
minmax(min, max) 它指定最小默认列大小和最大可达列大小。
fit-content() 它指定要显示内容的尺寸范围。可能会发生换行。

CSS 网格自动列属性示例

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

使用 Auto 值的网格自动列属性

为了允许网格项目根据其内容和网格容器中的可用空间自行调整大小，我们使用 auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: auto;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

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

   </div>
</body>

</html>

使用长度值的网格自动列属性

要设置隐式列的大小，我们可以使用长度单位（例如 10px、20em 等）指定大小。因此，所有隐式创建的列都将具有指定的大小。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: 140px;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: 140px
      (each column is 140px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

使用百分比值的网格自动列属性

要设置隐式列的大小，我们可以使用百分比值（例如 10%、20% 等）指定大小，这些值将大小分配为容器大小的百分比。因此，所有隐式创建的列都将具有指定的大小。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: 23%;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: 15% (each column is 
      15% of the width of the container)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

使用 Max Content 值的网格自动列属性

要使隐式创建的列与列中最大的内容一样宽，我们使用 max-content 值。每列都会扩展以适应其内容，而不会换行或裁剪，使列与最大的内容项目一样宽。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: max-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: max-content (the items are sized 
      such that they accomodate all the content without
      overflow or wrapping)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first Item1
      </div>
      <div class="grid-item item2">
         Second Item
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

使用 Min Content 值的网格自动列属性

要使隐式创建的列与它们内部最小的内容一样窄，同时仍确保所有内容都完全可见，我们使用 min-content 值。这允许列缩小以适应最小的内容大小，从而导致换行。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: min-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: min-content (the items are sized
      such that they accomodate all the content with
      overflow or wrapping)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first Item1
      </div>
      <div class="grid-item item2">
         Second Item
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

使用 MinMax 函数的网格自动列属性

要为网格项目定义一个尺寸范围，我们使用 minmax() 函数来指定项目的默认最小尺寸和最大可达尺寸（例如，minmax(50px,100px) 表示初始尺寸为 50px，但元素可以增长到 100px）。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: minmax(100px, 150px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: minmax(100px, 150px) 
      (the items will have an initial size of
      100px but cant grow upto 150px depending
      on the content.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1.
      </div>
      <div class="grid-item item2">
         This is Second Item.
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

使用 Fit Content 函数的网格自动列属性

要根据其内容（不超过指定的最大值）为隐式创建的列分配大小，我们使用 fit-content() 函数。元素最多可以具有分配给函数的大小，如果内容比指定的大小长，则会发生换行。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: fit-content(120px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: fit-content(120px)
      (the items will have a max width of 120px
      and will not exceed this value but ensure
      the content is completely displayed.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1.
      </div>
      <div class="grid-item item2">
         This is Second Item.
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
grid-auto-columns 57 16 52 10 44
css_properties_reference.htm
打印页面
上一页
下一页
广告