CSS Grid中自动适应（Auto-fit）与自动填充（Auto-fill）属性的区别

在开发网页时，响应式网页是一个必须时刻牢记的关键点。网格模块使开发人员能够轻松设计网页，无需使用大量的定位，因为id模块提供了一个网格类型的布局系统，其中包含行和列。

自动填充（Auto-fill）属性

自动填充属性用于填充行中可能出现的列，被添加的列将占据空间，而其他列将为空。自动填充属性是CSS网格的重要属性，主要用于创建响应式布局，而无需使用媒体查询。

语法

让我们来看看自动填充属性的语法。

:auto-fill;

示例

在下面的程序中，

我们首先创建了一个名为“autofill”的类，然后在类中放置了3个不同颜色的物品，展示了不同的盒子。
我们将“display属性”设置为网格，并为容器分配了高度和宽度。随后，使用auto-fill属性来设置其最小最大值。
最后，我们为之前创建的3个物品指定了尺寸。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using the auto-fill property</title>
   <style>
      .first-item {
         background-color: violet;
         border: solid black 4px ;
         max-width: 100%;
         min-height: 150px;
         height: auto;
      }
      .second-item {
         background-color: blue;
         border: solid black 5px;
         min-height: 150px;
         max-width: 100%;
         height: auto;
      }
      .third-item {
         background-color: maroon;
         border: solid black 5px;
         min-height: 150px;
         max-width: 100%;
         height: auto;
      }
      .autfill {
         margin-top: 4%;
         border: solid black 3px;
         width: 80vh;
         grid-template-columns: repeat(
         auto-fill, minmax(190px, 1fr));
         display: grid;
         gap: 5px;
      }
      .para{
         text-align: center;
      }
   </style>
</head>
<body>
   <div class="content">
      <div class="para"><h1>This is an example!!</h1></div>
      <div class="autfill">
         <div class="first-item"><h2 class="group">1</h1></div>
         <div class="second-item"><h2 class="group">2</h1></div>
         <div class="third-item"><h2 class="group">3</h1></div>
      </div>
   </div>
</body>
</html>

自适应属性

“auto-fit”属性与“auto-fill”属性类似，唯一的区别是它通过占用可用空间来扩展其大小，取决于设备的宽度。如果网格的所有项目都为空，则它们都被视为单个轨道。

示例

在下面的示例中，我们将该属性的值设置为auto-fit。auto-fit属性将自动拉伸自身，以填满整个行的宽度，并通过拉伸自身来填充任何空白空间。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example of using the auto-fit property</title>
   <style>
      #container {
         display:grid;
         width:100%;
         border:2px solid blue;
         grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
      }
      #first-item,#second-item,#third-item {
         height:100px;
         margin:3px 15px 15px 2px;
         background-color: blue;
      }
   </style>
</head>
<body>
   <div id="container">
      <div id="first-item">1</div>
      <div id="second-item">2</div>
      <div id="third-item">3</div>
   </div>
</body>
<html>

在上面的示例中，您可以看到，项目填满了整行的宽度以及剩余空间的区域。

auto-fit与auto-fill属性

网格布局具有不同的属性。auto-fit和auto-fill属性都是CSS网格模块的一部分。网格布局的语法如下所示−

.container-grid{
   display: grid;
}

上面是设置 HTML 元素显示属性为网格布局的语法。

结论

auto-fit 和 auto-fill 都是 CSS-Grid 的属性，用于创建响应式布局而不使用媒体查询。其中，auto-fill 属性在一行中允许有空白空间，而 auto-fit 属性会使内容自动拉伸以填满整行。本文介绍了 auto-fill 和 auto-fit 这两个属性的使用方式，用于创建响应式布局。