英文 | https://betterprogramming.pub/top-7-css-grid-layout-concepts-with-examples-18c85e4d0b27

翻譯 | 小愛

網(wǎng)格布局可以大幅度更改視覺布局的結(jié)構(gòu)，而無需進(jìn)行相應(yīng)的標(biāo)記更改。通過將媒體查詢與CSS屬性結(jié)合在一起，你可以輕松地實(shí)現(xiàn)響應(yīng)性，以在移動(dòng)設(shè)備上顯示，同時(shí)保持HTML代碼完善的語義結(jié)構(gòu)。

我們在包含六個(gè)框的頁面上瀏覽CSS網(wǎng)格布局效果。

我們的初始HTML代碼如下所示：

<div class="grid-init grid">    <div class="box-init box">A</div>    <div class="box-init box">B</div>    <div class="box-init box">C</div>    <div class="box-init box">D</div>    <div class="box-init box">E</div>    <div class="box-init box">F</div></div>

CSS代碼，美觀而清晰：

* {    /*  width and height of elements include in         self values of fields and boundaries  */    box-sizing: border-box;}.grid-init {    max-width: 400px; /* maximum container width */    margin: auto; /* centering the container on the page */    background-color: lightsteelblue; /* background*/    padding: 10px; /* padding */}.box-init {    font-size: larger; /* font size */    color: #fff; /* text color */    border-radius: 5px; /* rounding corners */    background-color: #2196f3; /* background color */    border: 1px solid black; /* block boundary */    padding: 10px; /* padding */    /*  aligning text to the center of the block         using CSS Flexbox  */    display: flex;     align-items: center;    justify-content: center;}

我們的頁面將如下所示：

太好了，我們添加了一些美麗的頁面效果，現(xiàn)在讓我們弄清楚如何創(chuàng)建此網(wǎng)格效果！

顯示：網(wǎng)格內(nèi)聯(lián)網(wǎng)格屬性

為了創(chuàng)建.grid網(wǎng)格，我們?yōu)閹в蓄恉isplay的容器添加了一個(gè)屬性：grid。Y顯示：inline-grid，與通常的一個(gè)網(wǎng)格的區(qū)別與inline-blockc塊相同。

所以，讓我們寫：

.grid {    display: grid;}

從這一刻起，容器.grid將成為一個(gè)網(wǎng)格。我們不會(huì)從視覺上看到差異，為此，我們需要新的屬性，我們將進(jìn)一步考慮這些屬性。 

我們?nèi)绾卫斫獍l(fā)生了什么變化？為此，我們可以使用chrome瀏覽器的開發(fā)人員工具，通過Inspect CSS網(wǎng)格，我們可以看到網(wǎng)格的外觀如下：

它是具有六行的單列網(wǎng)格。

grid-gap，row-gap和column-gap屬性。

grid-gap用于設(shè)置網(wǎng)格單元之間的間距。讓我們給它一個(gè)10px的值。

代碼示例如下：

.grid {    display: grid;    grid-gap: 10px;}

反過來，它grid-gap結(jié)合了兩個(gè)屬性：

• row-gap 是兩行之間的距離。

• column-gap 是列之間的距離。

如果使用單個(gè)屬性，則代碼將如下所示：

.grid {    display: grid;    row-gap: 10px;    column-gap: 10px;}

網(wǎng)格模板列屬性

現(xiàn)在讓我們添加列：

.grid {    display: grid;    grid-gap: 10px;    grid-template-columns: 1fr 1fr 1fr;}

我們可以以長度，百分比和fr單位的任何CSS單位指定寬度。

fr（來自分?jǐn)?shù)）是為網(wǎng)格創(chuàng)建的一種新的計(jì)量單位形式。它使我們可以根據(jù)需要添加任意多的列，而不必?fù)?dān)心列的寬度。列之間的自由空間與fr的數(shù)量成正比。

1fr 1fr 1fr：這種表示法意味著我們創(chuàng)建了三個(gè)寬度相同的列。

一點(diǎn)數(shù)學(xué)知識(shí)

網(wǎng)格寬度為400像素。如果我們?yōu)間rid-template-columns設(shè)置以下值：1.5fr 2fr 1frthen，則所有列的寬度將等于1.5fr + 2fr + 1fr = 4.5fr。

現(xiàn)在，我們來計(jì)算每列的寬度。第一列的寬度為1.5fr / 4.5fr * 400px。最終為133px。相應(yīng)地計(jì)算剩余值。

第二列是2fr / 4.5fr * 400px = 178px，第三列是1fr / 4.5fr * 400px = 89px。對(duì)于這些，我們可以定義像這樣的列：

grid-template-columns：133px 178px 89px;

總寬度為400像素。

在這種情況下，如果我們要添加另一列或相反將其刪除，則必須手動(dòng)重新計(jì)算并替換所有值。使用fr單位，將自動(dòng)重新計(jì)算所有內(nèi)容。

網(wǎng)格模板行屬性

此屬性使您可以向網(wǎng)格中添加行。

翻

.grid {    display: grid;    grid-gap: 10px;    grid-template-columns: 1fr 1fr 1fr;    grid-template-rows: 1fr 1fr;}

讓我們離題，仔細(xì)看看我們的網(wǎng)格是什么，并分析一些新概念。

網(wǎng)格自動(dòng)行，網(wǎng)格自動(dòng)列和網(wǎng)格自動(dòng)流屬性

在創(chuàng)建列示例中，你可能已經(jīng)注意到我們沒有定義列。這是因?yàn)榭梢燥@式或隱式指定列和行。

如果我們未指定grid-template-rows，則意味著，如有必要，這些行將被自動(dòng)添加并且是隱式的。

必須使用grid-auto-rows設(shè)置隱式網(wǎng)格上的行高。

反過來，對(duì)于列，有一個(gè)屬性grid-auto-columns，它設(shè)置列的寬度。

屬性grid-auto-flow允許你指定用于元素自動(dòng)放置的元素（行或列）-默認(rèn)值為row。

讓我們看一個(gè)示例，該示例顯示列的隱式添加。為此，我們將grid-auto-flow設(shè)置為equal column。此外，讓我們將顯式定義的列數(shù)減少為兩個(gè)。在此示例中，我們將在最后一個(gè)單元格中寫入文本FF。

.grid {    display: grid;    grid-gap: 10px;    grid-template-columns: 1fr 1fr;    grid-template-rows: 1fr 1fr;    grid-auto-flow: column;}

需要注意的重要一點(diǎn)是，單元格是按列而不是行排列的。第一列中的A和B，第二列中的C和D，依此類推。

如你所見，第三列是自動(dòng)添加的，其寬度是根據(jù)最寬單元格中的內(nèi)容形成的。讓我們?yōu)樵摿性O(shè)置寬度：

grid-auto-columns：1fr；

我們得到了熟悉的網(wǎng)格。

Repeat () 函數(shù)

此功能允許你在值重復(fù)的情況下縮短列和行的聲明。

例如，我們有如下代碼：

.grid {    display: grid;    grid-gap: 10px;    grid-template-columns: 1fr 1fr 1fr;    grid-template-rows: 1fr 1fr;}

.grid {    display: grid;    grid-gap: 10px;    grid-template-columns: repeat(3, 1fr);    grid-template-rows: repeat(2, 1fr);}

Minmax（）函數(shù)，自動(dòng)填充和自動(dòng)擬合

讓我們來看一個(gè)使用此函數(shù)的示例：

.grid {    display: grid;    grid-gap: 10px;    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}

minmax（120px，1fr）表示最小的列大小是120px，最大的列是1fr。

auto-fill使我們的網(wǎng)格響應(yīng)迅速。也就是說，當(dāng)我們調(diào)整瀏覽器窗口的大小時(shí)，其中的元素會(huì)更改其位置。

當(dāng)瀏覽器窗口寬度為450px時(shí)，效果如下：

在瀏覽器窗口寬度為300px時(shí)，效果如下：

在瀏覽器窗口寬度為200px時(shí)，效果如下：

auto-fit多行網(wǎng)格中的效果與auto-fill相似。差異顯示在單行網(wǎng)格中。auto-fit空條紋從自動(dòng)適應(yīng)條壓縮到零，即它們似乎消失了。

若要查看差異，請(qǐng)考慮以下示例。

由于auto-fill我們有三列：

grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

從auto-fit空列中消失：

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

網(wǎng)格模板區(qū)域，網(wǎng)格區(qū)域?qū)傩?/span>

有多種創(chuàng)建網(wǎng)格單元和網(wǎng)格區(qū)域的方法。一種方法是使用網(wǎng)格線，它負(fù)責(zé)此屬性grid-column-start，grid-column-end，grid-row-start和grid-row-end。 

使用這種方法，代碼很難閱讀，如果布局發(fā)生重大變化，則必須重寫大量代碼。因此，我們將考慮使用grid-template-areas和的第二種方法grid-area。

首先，讓我們編輯html代碼并在其中使用語義標(biāo)記：

<div class="grid-init grid">    <header class="box-init box l-header">HEADER</header>    <nav class="box-init box l-nav">NAV</nav>    <main class="box-init box l-main">MAIN</main>    <aside class="box-init box l-aside">ASIDE</aside>    <section class="box-init box l-section">SECTION</section>    <footer class="box-init box l-footer">FOOTER</footer></div>

在幫助下，grid-area我們?yōu)閴K設(shè)置了別名：

.l-header {    grid-area: my-header;}.l-nav {    grid-area: my-nav;}.l-main {    grid-area: my-main;}.l-aside {    grid-area: my-aside;}.l-section {    grid-area: my-section;}.l-footer {    grid-area: my-footer;}

在幫助下grid-template-areas，定義頁面模板：

.grid {    display: grid;    grid-gap: 10px;    grid-template-areas:        "my-header my-header my-header"        "my-nav my-main my-aside"        "my-nav my-section my-section"        "my-footer my-footer my-footer";    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}

現(xiàn)在，我們有了一個(gè)三乘四的網(wǎng)格（三列四行）。我們還有六個(gè)網(wǎng)格區(qū)域。

我們可以通過簡單地更改grid-template-area中的網(wǎng)格區(qū)域來更改模板。

快速，輕松地完成此操作-讓我們嘗試：

.grid {    display: grid;    grid-gap: 10px;    grid-template-areas:        "my-nav my-header my-header"        "my-nav my-main my-aside"        "my-nav my-section my-aside"        "my-nav my-footer my-footer";    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}

就是這樣，我們在最短的時(shí)間內(nèi)更改了模板！

結(jié)論

我應(yīng)該說，本教程并不打算涵蓋CSS Grid Layout的所有方面-主題非常廣泛。但是，我們已經(jīng)介紹了一些基本理論和示例，以幫助你開始使用CSS Grid。

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)