CSS网格中的自动适应与自动填充属性的区别

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

自动填充属性

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

语法

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

:auto-fill;

示例

在以下程序中。

我们首先做了一个 “自动填充 “类，然后在该类中我们放置了3个项目，每个项目都有不同的颜色，展示不同的盒子。
我们将 “显示属性 “设置为网格，并为容器分配了一个高度和宽度。后来，自动填充属性被用来设置其最小值。
最后，我们给我们之前做的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>

自动拟合属性

自动适应 “属性与 “自动填充 “属性类似，唯一不同的是，该属性将通过占用它的可用空间来扩展其大小，这取决于设备的宽度。如果网格的所有项目都是空的，那么所有的项目都被当作一个单一的轨道。

示例

在下面的例子中，我们将该属性值设置为自动适应。自动拟合属性会拉伸自己，从而填充整个行的宽度，并通过拉伸自己来填充任何空位。

<!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>

在上面的例子中，你可以看到这些项目已经填满了整个行的宽度和有剩余空间的区域。