資料結構
網路
關係型資料庫管理系統 (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+ 閱讀量
