数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究CSS Grid 中 auto-fit 和 auto-fill 属性的区别
响应式网页是网站开发中必须始终牢记的关键点。Grid 模块使开发者能够轻松设计网页，无需大量使用定位，因为 id 模块提供了一种网格类型的布局系统，其中包含行和列。
auto-fill 属性
auto-fill 属性用于用可能的列填充行，添加的列将占据空间，其他列将为空。auto-fill 属性是 CSS Grid 的重要属性，主要用于在不使用媒体查询的情况下创建响应式布局。
语法
让我们看看 auto-fill 属性的语法。
:auto-fill;
示例
在下面的程序中：
我们首先创建了一个名为“autofill”的类，然后在类中放置了 3 个项目，每个项目都有不同的颜色，展示不同的盒子。
我们将“display 属性”设置为 grid，并为容器分配了高度和宽度。之后，使用 auto-fill 属性设置其 minimax 值。
最后，我们为前面创建的 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-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 Grid 模块的一部分。网格布局的语法如下：
.container-grid{
display: grid;
}
以上是网格布局的语法，它将 HTML 元素的 display 属性设置为网格布局。
结论
auto-fit 和 auto-fill 都是 CSS Grid 的属性，用于在不使用媒体查询的情况下创建响应式布局，其中 auto-fill 属性允许在行中留出空隙，而 auto-fit 属性的内容将自身拉伸以完全填充行。在本文中，我们介绍了用于创建响应式布局的这两个属性：auto-fill 和 auto-fit。
1K+ 阅读量
