[譯]CSS Grid #13：auto-fill 和 auto-fit 關鍵字

時間 2019-12-02

標籤 css grid auto fit 關鍵字欄目 CSS 简体版

原文原文鏈接

原文：CSS Grid #13: The auto-fill and auto-fit Keywords in CSS Grid, by Jorge Montoya。css

導讀： joomlashack.com 是一家爲著名 CRM 系統 Joomla 提供擴展和模板的一家公司。將來 Joomla 4 將使用 CSS Grid 進行佈局。做者 Jorge Montoya 爲了幫助 Joomla 開發者掌握 Grid 佈局背後的核心概念，發佈了這個系列的教程。本篇是本系列教程的第十三篇。我在學習 Grid 佈局時，對 auto-fill 和 auto-fit 這兩個關鍵字的存在疑惑，看完這篇文章後，就懂了。因而翻譯出來，但願也能幫到你們。html

在 Grid 佈局中，使用 auto-fill 或 auto-fit 關鍵字，能幫你在一行中儘量多的排列 Grid 項目。本教程將會解釋這兩個關鍵字的做用。瀏覽器

開始吧！編輯器

第一步：建立 HTML

打開代碼編輯器
建立一個 HTML 文件，將下列代碼粘貼進去

<div class="container">
   <div class="item item1">First</div>
   <div class="item item2">Second</div>       
   <div class="item item3">Third</div>      
   <div class="item item4">Fourth</div>       
   <div class="item item5">Fifth</div>       
   <div class="item item6">Sixth</div>
   <div class="item item7">Seventh</div>       
   <div class="item item8">Eighth</div>   
</div>
複製代碼

第二步：建立 CSS

建立一個 CSS 文件，在 HTML 中引入此文件
將下列樣式添加到 CSS 文件中

/* 全局樣式 */
* {
    box-sizing: border-box;
}
body {
    background-color: #AAA;
    margin: 50px;
}

/* 每一個 Grid 項目中都包含一個數值 */
.item {   
    /* 居中顯示 Grid 項目裏的內容。每一個 Grid 項目同時也是一個 Flex 容器 */
    display: flex;
    /* 水平垂直居中 */
    justify-content: center;
    align-items: center;
    border: 5px solid #87b5ff;
    border-radius: 3px;
    font-size: 2em;
    font-family: sans-serif;
    font-weight: bold;
    background-color: #1c57b5;
}
複製代碼

第三步：CSS Grid

建立包含 4 列的 Grid 容器。每列的寬度設置爲 200px，列與行之間的間隔是 1.5rem（差很少是桌面屏幕裏的 24px）。ide

/* CSS Grid 樣式 */
.container {
   display: grid;
   grid-template-columns: repeat(4, 200px);
   grid-gap: 1.5rem;
}
複製代碼

能夠看見，Grid 容器第一行裏還有空間放置第五個 Grid 項目，但由於咱們僅聲明瞭四列，因此容器右邊的額外空間就沒被使用。函數

第四步：使用 auto-fill 和 auto-fit

編輯 CSS 代碼：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
   grid-gap: 1.5rem;
}
複製代碼

Grid 容器的寬度足夠裝下 5 個項目，每一個的寬度是 200px。佈局

咱們調整瀏覽器窗口的尺寸，讓視口寬度變窄一些，好比 800px。學習

第4、第五個項目被折到下一行顯示，由於如今的空間只夠裝得下 3 個項目的。下列是涉及到的一些數學運算：flex

3 列（每一個 200px）= 600xui

每列之間的間隙 = 24px * 2 = 48px

總共使用的空間 = 648px

視口寬度：800px

視口剩餘空間：800px - 648px = 152px

第四個項目折到下一行顯示，是由於剩餘空間不足 200px 了，沒有地方能裝得下了。

再編輯一下 CSS 代碼：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, 200px);
   grid-gap: 1.5rem;
}
複製代碼

發現佈局上沒有任何改變。

爲了展現 auto-fill 和 auto-fit 的不一樣點，咱們將 7 個項目刪減爲 3 個。

<div class="container">
   <div class="item item1">First</div>
   <div class="item item2">Second</div>
   <div class="item item3">Third</div>
</div>
複製代碼

編輯 CSS 代碼：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
   grid-gap: 1.5rem;
}
複製代碼

若是有剩餘空間的話，auto-fill 會建立額外的空列。而 auto-fit 則以最後一個 Gird 項目結束 Gird 容器，無論是否還有額外的空間存在。

就是說，若是使用的是 auto-fill，你能夠指定第三個項目跨兩列，或者將 3 個項目裏的任意一個放在最後一個單元格的位置。

你可能感受這仍是挺使實用的哦，可是確實沒大用處。接着讀，來看看這倆關鍵字的真正實力。

第五步：搭配 minmax() 使用 auto-full 和 auto-fit

CSS 提供的 minmax() 函數用於指定 Grid Track 的最小和最大尺寸。搭配 minmax() 使用 auto-full 和 auto-fit 能幫你建立一個具備響應式行爲的網格系統。

編輯 CSS 代碼：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   grid-gap: 1.5rem;
}
複製代碼

auto-fill 關鍵字根據當前視口的寬度，分配了另外兩個空列在右邊。注意，這些列的尺寸不是固定的。

這些列被指定佔據一樣的寬度，列的寬度會基於 minmax() 函數中的參數進行調整。

如今調整視口的尺寸，讓第三個項目折到下一行顯示

再來看下 auto-fit 關鍵字的表現。

編輯 CSS 代碼：

.container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 1.5rem;
}
複製代碼

發現三個項目佔滿了全部的可用空間。若是將視口尺寸調整到 524px 的話，會看到第 3 個項目會折到下一行顯示。

下面列出了其中涉及到的一些數學運算：

2 列（每一個 200px）= 400x —— minmax() 中指定的最小尺寸。

每列之間的間隙 = 24px

總共使用的空間 = 424px

body margin（在全局樣式中設置） = 左右各 50px = 100px

視口寬度：524px

如今就有了一個具備響應式行爲的網格系統，不須要寫媒體查詢或者給 Grid 項目添加額外的類名（像 Bootstrap 那樣）。

如今知道 auto-fill 和 auto-fit 關鍵字在 Grid 佈局中的做用了吧。它確實能幫助咱們一個響應式的網格系統。

謝謝閱讀！

這個系列以前的 12 篇文章：

（完）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。