小白都覺得好用的CSS布局屬性Grid

面我學(xué)習(xí)了Flex布局之后感覺是真的爽啊，比之前用浮動，定位方便太多了，之前幾十行代碼才能寫完的布局，用了Flex10行左右就搞定了，今天學(xué)了Grid發(fā)現(xiàn)比Flex更爽，代碼寫的還要少，真是太厲害了，現(xiàn)在我把學(xué)習(xí)的相關(guān)知識梳理了一下，給大家分享一下，同時也可以作為我日后復(fù)習(xí)的筆記。

一、認(rèn)識Grid屬性

1.Grid容器屬性：

屬性說明：

grid-template-columns 軌道列寬

grid-template-rows 軌道行高

gap 軌道間距

grid-auto-columns 隱式軌道的列寬

grid-auto-rows 隱式軌道的行高

grid-auto-flow 隱式軌道排列方式，默認(rèn)行優(yōu)先

1.認(rèn)識網(wǎng)格容器/網(wǎng)格項(xiàng)目/網(wǎng)格軌道/軌道間距

首先我們寫出一個html結(jié)構(gòu)，聲明它的樣式為網(wǎng)格布局：display:grid;

<div class="container">
    <span class="item">item1</span>
    <span class="item">item2</span>
    <span class="item">item3</span>
    <span class="item">item4</span>
    <span class="item">item5</span>
    <span class="item">item6</span>
</div>

效果圖：

由此可見，之前的span元素為行內(nèi)元素，在聲明了網(wǎng)格布局之后，全部變?yōu)榱藟K元素。
與之前的flex布局不一樣，flex布局是行內(nèi)元素。

以下是創(chuàng)建了一個2行3列的布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網(wǎng)格容器/網(wǎng)格項(xiàng)目/網(wǎng)格軌道/軌道間距</title>
    <style>
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            grid-template-columns: auto;
            grid-template-columns: 10em 10em auto;
            grid-template-rows: 5em 5em;
            gap: 0.5em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>
</html>

效果圖：

通過上述案例我可以學(xué)習(xí)到網(wǎng)格布局的相關(guān)屬性用法：

使用display: grid;聲明一個網(wǎng)格布局，其中.container稱為網(wǎng)格容器，其子元素span稱為網(wǎng)格項(xiàng)目。
設(shè)置軌道的列寬：grid-template-columns：10em 10em auto，意思是聲明了一個三列的網(wǎng)格布局，auto表示剩下的布局自適應(yīng)。
設(shè)置軌道的行高：grid-template-rows：5em 5em，意思是聲明了一個兩行的網(wǎng)格布局，高度都是5em
設(shè)置軌道的間距：gap: 0.5em 0.5em，聲明了軌道之間的間距，可以簡寫成gap:0.5em。
網(wǎng)格項(xiàng)目：網(wǎng)格容器中的“子元素”，與flex是一樣的，默認(rèn)生成一列N行的容器（N就是項(xiàng)目的數(shù)量）。

總結(jié)：

網(wǎng)格容器：由若干個矩形網(wǎng)格單元構(gòu)成；
網(wǎng)絡(luò)項(xiàng)目：網(wǎng)格容器的子元素，必須放在網(wǎng)格單元中；
網(wǎng)格單元：有“單元格”和“網(wǎng)格區(qū)域”兩種表現(xiàn)形式；
網(wǎng)格軌道：由多個網(wǎng)格單元組成，根據(jù)排列方向有“行軌”和“列軌”之分；
軌道間距：容器中軌道之間的間距,有"行軌間距","列軌間距"。

2.自定義項(xiàng)目屬性：

grid-area語法：grid-row-start / grid-column-start / grid-row-end / grid-column-end;

編號從左上角開始（1,1）并且是遞增的。

相關(guān)屬性說明：

grid-row-start 項(xiàng)目的起始行；
grid-column-start 項(xiàng)目的起始列；
grid-row-end 項(xiàng)目的結(jié)束行；
grid-column-end 項(xiàng)目的結(jié)束列。

2.自定義項(xiàng)目在容器中的顯示位置

首先，還是先創(chuàng)建一個網(wǎng)格布局的html結(jié)構(gòu)：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
    <div class="item">item7</div>
    <div class="item">item8</div>
    <div class="item">item9</div>
</div>

給出以下樣式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 軌道列寬 */
    grid-template-columns: repeat(3, 1fr);
    /* 軌道行高 */
    grid-template-rows: 5em 5em;
    /* 行優(yōu)先時要設(shè)置隱式軌道的行高 */
    grid-auto-rows: 5em;
    /* 軌道間距 */
    gap: 0.5em 1em;
}

.container > .item {
    background-color: lightcyan;
    border: 1px solid #000;
    padding: 0.5em;
}
</style>

效果圖：

現(xiàn)在我們以第5個項(xiàng)目來舉例，將它移動到第一個網(wǎng)格單元中：

<style>
.container .item:nth-of-type(5) {
    background-color: lightyellow;
    /* item5的默認(rèn)位置 */
    grid-area: 2 / 2 / 3 / 3;
    /* 將它放入到第一個網(wǎng)格單元中 */
    grid-area: 1 / 1 / 2 / 2;
}
</style>

由于默認(rèn)項(xiàng)目是跨越一行一列的，所以可以簡寫成下面的格式：

grid-area: 1 / 2;

效果圖：

但是，如果是跨越1行1列以上的，就不能省略了。例如要跨越2行3列，就必須寫成下面的格式：

grid-area: 1 / 1 / 3 / 4;

通常的情況是我們只關(guān)心跨越幾行幾列，并不關(guān)心它的結(jié)束行號，所以還可以這樣寫：

grid-area: 1 / 1 / span 2 / span 3;

所以，上述兩種寫法的效果是一樣的。

效果圖：

再以第1個項(xiàng)目為例，有如下樣式：

<style>
    /* 添加一個淺綠色背景便于區(qū)分 */
    background-color: lightgreen;
    /* 默認(rèn)位置 */
    grid-area: 1 / 1 / 2 / 2;
</style>

效果圖：

如果現(xiàn)在要跨1行3列，可以寫成如下格式：

grid-area: 1 / 1 / span 1 / span 3;

因?yàn)閕tem1默認(rèn)的位置是1 / 1，所以上述樣式可以簡寫成：

grid-area: span 1 / span 3;

之前說過，項(xiàng)目默認(rèn)的是跨1行1列，所以，可以簡寫成如下格式：

grid-area: auto / span 3;

由以上案例可以得出結(jié)論：

grid-area：參數(shù)數(shù)量不同，意義不同

1. 值中只有span

單值：跨的行數(shù)。
雙值：跨的行與列數(shù)，如果只想設(shè)置列數(shù)，就必須設(shè)置行數(shù)（auto—）。

2. 值中有span和編號

雙值：沒有span，默認(rèn)跨1行1列，grid-area： 2 / 3；
2.2 三值：省略列結(jié)束編號或跨的數(shù)量，此時前面的值可使用auto；
2.3 四值：最完整的語法。

3.網(wǎng)格單元尺寸的新單位：fr
設(shè)置軌道寬度時可以用一個新單位:fr(fraction)，類似于flex中的伸縮因子。

現(xiàn)有如下網(wǎng)格布局：

<div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item5</div>
    <div class="item">item6</div>
</div>

給出如下樣式：

<style>
.container {
    border: 1px solid #000;
    padding: 0.5em;
    display: grid;
    /* 軌道列寬 */
    grid-template-columns: 10em 10em 10em;
    /* 軌道行高 */
    grid-template-rows: 5em 5em;
    /* 軌道間距 */
    gap: 0.5em;
}
</style>

效果圖：

此時我們可以在設(shè)置軌道寬度的時候使用一個新單位：fr（fraction），類似于flex的伸縮因子

grid-template-columns: auto auto auto;

效果圖：

以上屬性設(shè)置了一個自適應(yīng)的3列等寬的布局，如果現(xiàn)在出現(xiàn)一個新的需求，中間一列的寬度是兩邊的二倍，那么auto就無法滿足了，但是fr可以完美解決這個問題：

grid-template-columns: 1fr 2fr 1fr;

效果圖：

總結(jié)：

% 與 fr可以共存，計(jì)算方式：總寬度減去百分比寬度，剩下的寬度都分給fr；
px是固定的，em也是固定的，計(jì)算時要減去這些固定值，將剩下的空間都分給fr；
auto，fr，% 都是相對單位，都可以觸發(fā)自動計(jì)算機(jī)制，盡可能不要同時出現(xiàn)；
auto 與 px，em同時使用會自動計(jì)算。

4.網(wǎng)格單元尺寸的常用函數(shù)：repeat(),minmax()

還是跟上面案例一樣的初始樣式，現(xiàn)在如果我要設(shè)置一個3列10em寬度的布局，可以利用repeat()函數(shù)這樣寫：

grid-template-columns: repeat(3, 10em);

等價(jià)于下面的寫法：

grid-template-columns: 10em 10em 10em;

repeat()的第二個參數(shù)可以是多個值

grid-template-columns: repeat(3, 10em 2em);

等價(jià)于下面的寫法：

grid-template-columns: 10em 2em 10em 2em 10em 2em;

repeat()函數(shù)還可以與fr混合使用：

grid-template-columns: repeat(2, 1fr) 2fr;

等價(jià)于下面的寫法：

grid-template-columns: 1fr 1fr 2fr;

3.minmax()函數(shù)

中間列，最小寬度是20em，最大寬度是左右的2倍

grid-template-columns: 1fr minmax(20em, 2fr) 1fr;

效果圖：

grid-template-columns: 20em minmax(20em, 1fr);

效果圖：

當(dāng)使用1fr時，auto效果也一樣，即使寫成5fr也是可以的。

grid-template-columns: 20em minmax(20em, 1fr);

grid-template-columns: 20em minmax(20em, 5fr);

grid-template-columns: 20em minmax(20em, auto);

以上三種寫法效果完全一樣。

效果圖：

5.網(wǎng)格單元的排列方式與隱式軌道

現(xiàn)有如下的html結(jié)構(gòu)和樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網(wǎng)格單元的排列方式與隱式軌道</title>
    <style>
        /* 網(wǎng)格容器 */
        .container {
            border: 1px solid #000;
            padding: 0.5em;
            display: grid;
            /* 軌道列寬 */
            grid-template-columns: repeat(3, 1fr);
            /* 軌道行高 */
            grid-template-rows: 5em 5em;
            /* 軌道間距 */
            gap: 0.5em 1em;
        }
        .container > .item {
            background-color: lightcyan;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">item1</div>
        <div class="item">item2</div>
        <div class="item">item3</div>
        <div class="item">item4</div>
        <div class="item">item5</div>
        <div class="item">item6</div>
        <div class="item">item7</div>
        <div class="item">item8</div>
        <div class="item">item9</div>
    </div>
</body>
</html>

效果圖：

此時聲明的網(wǎng)格單元數(shù)量已經(jīng)不夠存放網(wǎng)格項(xiàng)目了，多出的三個項(xiàng)目會自動放入到自動生成的網(wǎng)格空間中了,這時，原來聲明的網(wǎng)格單元叫做：顯示軌道，新項(xiàng)目顯示的軌道稱為：隱式軌道。

此時，默認(rèn)項(xiàng)目在容器中按照先行后列的順序排列，即：“行優(yōu)先”。

grid-auto-flow: row;

自動生成的隱式軌道的高度是自動的，因此，行優(yōu)先時要設(shè)置隱式軌道的行高。

grid-auto-rows: 5em;

效果圖：

列優(yōu)先時，需要設(shè)置隱式軌道的列寬：

grid-auto-flow: column;
grid-auto-columns: 1fr;

效果圖：

以上就是Grid布局的基本知識，個人感覺難度不是很大，就是屬性有點(diǎn)多，需要花時間去牢記，多寫一些布局，模仿一些網(wǎng)站這樣對于掌握這些知識會有很大的幫助，這兩天準(zhǔn)備學(xué)習(xí)完Flex和Grid布局之后仿一個京東手機(jī)端的頁面練練手。

如果有跟我一樣才學(xué)習(xí)這些基礎(chǔ)知識的朋友大家可以相互交流一下。

件來源：阿里云開發(fā)者社區(qū)（點(diǎn)擊下面“了解更多”查看原文）

CSS Grid 可以將元素放入有行和列的網(wǎng)格中，從而讓創(chuàng)建二維布局成為可能。有了它，你可以自定義網(wǎng)格的任何形態(tài)，例如網(wǎng)格寬高、網(wǎng)格范圍、或者網(wǎng)格之間的間隙。但是，CSS Grid 可能會有訪問性不佳的問題，尤其是對于那些使用屏幕閱讀器和僅使用鍵盤的用戶。本篇教程將會幫助你避免此類問題。

源順序獨(dú)立性

“源順序獨(dú)立性”是 CSS Grid 強(qiáng)大優(yōu)勢之一。這意味著你不需要像使用 float 或者表格布局那樣，在 HTML 中定義布局結(jié)構(gòu)。你可以使用 CSS Grid 的排序和網(wǎng)格位置屬性改變 HTML 呈現(xiàn)的視覺效果。

W3C 的 CSS Grid 文檔中的重排序和可訪問性章節(jié)，將源順序獨(dú)立性定義為：

“通過將網(wǎng)格布局與媒體查詢相結(jié)合，開發(fā)者可以使用相同的語義標(biāo)記，但是元素布局的重新排列是脫離源代碼順序而獨(dú)立存在的，這樣就可以同時在源代碼順序和渲染出的視覺效果兩個方面實(shí)現(xiàn)需要的布局。”

使用 CSS Grid，你可以將邏輯順序和視覺順序解耦。源順序獨(dú)立性在很多時候都非常有用，但是它也有可能會破壞代碼的可訪問性。使用屏幕閱讀器和鍵盤的用戶都只能看到你 HTML 文件的代碼邏輯順序，但是無法看到通過 CSS Grid 創(chuàng)建出來的視覺順序。

如果你的文檔很簡單，這通常不是什么大問題，因?yàn)檫@時候源代碼邏輯順序和視覺順序基本是一致的。但是，比較復(fù)雜、不對稱、零散，或者使用了其他創(chuàng)意布局的文件通常就會對使用屏幕閱讀器或者鍵盤的用戶造成困惑。

能改變視覺順序的屬性

CSS Grid 有很多可以改變文檔視覺順序的屬性：

order —— 在 flexbox 和 CSS Grid 規(guī)則中都有 order 屬性。它可以改變 flex 或者 grid 容器中項(xiàng)目的默認(rèn)排序。

網(wǎng)格位置屬性 —— grid-row-start，grid-row-end，grid-column-start，grid-column-end。

上述網(wǎng)格位置屬性的簡寫 —— grid-row，grid-column，和 grid-area（它是 grid-row 和 grid-column 的簡寫）。

grid-template-areas —— 指定已命名的網(wǎng)格區(qū)的位置。

如果你想知道更多關(guān)于網(wǎng)格位置屬性的使用方法，可以看看我們之前關(guān)于網(wǎng)格區(qū)域的文章。現(xiàn)在，讓我們看看視覺重排序是如何造成代碼可訪問性的問題的。

視覺效果與邏輯的重排序

這是一個簡單的網(wǎng)格布局，只有幾個簡單的鏈接，所以你可以使用鍵盤測試代碼：

<div class="container">
 <div class="item-1"><a href="#">Link 1</a></div>
 <div class="item-2"><a href="#">Link 2</a></div>
 <div class="item-3"><a href="#">Link 3</a></div>
 <div class="item-4"><a href="#">Link 4</a></div>
 <div class="item-5"><a href="#">Link 5</a></div>
 <div class="item-6"><a href="#">Link 6</a></div>
</div>

現(xiàn)在我們再加入一些樣式。下面的 CSS 代碼將網(wǎng)格元素放入了三個寬度相同的列中。使用 grid-row 屬性，第一個元素被移動到了第二行的開始。

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}
 
.item-1 {
 grid-row: 2;
}

在下面這個圖中，你可以看到最終的視覺效果，其中 Link 1 被加上了一些特殊樣式以便突出說明。普通的用戶將會首先看到 Link 2，但是使用屏幕閱讀器的用戶將會從 Link 1 開始，因?yàn)樗麄冏駨牡氖?HTML 代碼中定義的邏輯順序。

對于純鍵盤使用者，使用 tab 鍵瀏覽頁面也同樣困難，因?yàn)檫@樣依舊會從 Link 1 開始，也就是頁面的左下角（你可以自己嘗試一下）。

解決方案

解決方案非常簡單優(yōu)雅。不要改變視覺順序，你只需要將 Link 1 移動到 HTML 文件的下面。這樣，源代碼順序和視覺順序就一致了。

<div class="container">
 <div class="item-2"><a href="#">Link 2</a></div>
 <div class="item-3"><a href="#">Link 3</a></div>
 <div class="item-4"><a href="#">Link 4</a></div>
 <div class="item-1"><a href="#">Link 1</a></div>
 <div class="item-5"><a href="#">Link 5</a></div>
 <div class="item-6"><a href="#">Link 6</a></div>
</div>

你不需要在 CSS 中為 .item-1 添加任何關(guān)于 Grid 的屬性。因?yàn)槟阋膊挥酶淖兡J(rèn)的源代碼順序了，那么你只需要為網(wǎng)格容器定義屬性即可。

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}

看，盡管這個例子最終結(jié)果和以前一樣，現(xiàn)在它的可訪問性更高了。使用 tab 或者屏幕閱讀器都會從 Link 2 開始，邏輯上也遵循源代碼順序。

如何讓布局的可訪問性更好

這里有幾個通用的布局模版，你可以讓使用 CSS Grid 重排序?qū)傩缘拇a可訪問性更高。例如，“圣杯布局”就是這樣一種模式。它包括一個頭部，一個主要內(nèi)容區(qū)域，一個頁腳，還有兩個固定寬度的側(cè)邊欄，它們倆一個在左一個在右。

左邊欄布局可能會為使用屏幕閱讀器的用戶造成困惑。因?yàn)樽筮厵谠谠创a順序要要比主要內(nèi)容區(qū)域靠前，而它則是使用屏幕閱讀器的用戶最先看到的內(nèi)容。但是，通常情況下，使用屏幕閱讀器的用戶開始閱讀的位置最好是主要內(nèi)容。特別是當(dāng)左邊欄主要包括的其實(shí)是廣告，博客目錄，標(biāo)簽云，或者其他一些不相關(guān)的內(nèi)容。

CSS Grid 允許你改變 HTML 文件的源代碼順序，并將主要內(nèi)容放在兩個側(cè)邊欄前面：

<div class="container">
 <header>Header</header>
 <main>Main content</main>
 <aside class="left-sidebar">Left sidebar</aside>
 <aside class="right-sidebar">Right sidebar</aside>
 <footer>Footer</footer>
</div>

還有一些其他可用的解決方案，來使用 CSS Grid 定義視覺順序的改變。大部分教程都會使用命名的網(wǎng)格區(qū)域，并使用 grid-template-areas 屬性對它們進(jìn)行重排列。

下面的代碼是最簡單的解決方案，因?yàn)樗皇菫橐曈X順序和源代碼順序不同的元素添加了幾個額外的規(guī)則。CSS Grid 有優(yōu)秀的自動排列功能，能夠把余下的網(wǎng)格元素搞定。

.container {
 display: grid;
 grid-template-columns: 9.375rem 1fr 9.375rem;
 grid-gap: 0.625rem;
}
header, 
footer {
 grid-column: 1 / span 3;
}
.left-sidebar {
 grid-area: 2 / 1;
}

這樣，grid-column 讓 <header> 和 <footer> 區(qū)域橫跨整個屏幕（三列），然后 grid-area（grid-row 和 grid-column 的簡寫）固定了左邊欄的位置。如下就是使用這些樣式后的樣子：

盡管圣杯布局是一個相對簡單的布局，你還可以使用相同的邏輯來完成一些更復(fù)雜的布局。要始終牢記頁面的哪個部分是最重要的，哪部分是使用屏幕閱讀器的用戶在看到其他內(nèi)容之前可能最想看的。

語義丟失怎么辦

某些情況下，CSS Grid 也會對語義造成破壞；這也是影響可訪問性的一個方面。由于 display: grid; 布局僅被元素的直接子元素繼承，網(wǎng)格元素的子元素其實(shí)就不是網(wǎng)格布局的一部分了。為了節(jié)省工作量，開發(fā)者也許認(rèn)為將布局扁平化是一個不錯的解決方案，所以他們就將所有希望包括在網(wǎng)格布局內(nèi)的元素都作為網(wǎng)格容器的直接子元素。但是，如果一個布局被認(rèn)為的扁平化了，文件的語義通常也就丟失了。

加入你想要創(chuàng)建一個元素展覽墻（比如圖片墻），在這里，元素按照網(wǎng)格排列并被一個頭部和一個頁腳包圍。如下是帶語義的標(biāo)簽寫法：

<section class="container">
 <header>Header</header>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
 <li>Item 6</li>
 </ul>
 <footer>Footer</footer>
</section>

但是如果你想要使用 CSS Grid，<section> 應(yīng)該作為網(wǎng)格容器，<h1>、<h2> 和 <ul> 是網(wǎng)格元素。但是，列表內(nèi)的元素不被包括在網(wǎng)格內(nèi)，因?yàn)樗麄兪蔷W(wǎng)格容器子元素的子元素。

所以，如果你想要快速的完成工作，將布局結(jié)構(gòu)扁平化也許是一個不錯的主意，也就是讓所有的元素都作為網(wǎng)格容器的子元素：

<section class="container">
 <header>Header</header>
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
 <div class="item">Item 4</div>
 <div class="item">Item 5</div>
 <div class="item">Item 6</div>
 <footer>Footer</footer>
</section>

現(xiàn)在，你就可以很輕松地使用 CSS Grid 創(chuàng)建出想要的布局：

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}
header,
footer {
 grid-column: 1 / span 3;
}

一切看上去都非常好，但是文檔已經(jīng)丟失了它最初的語義，所以：

使用屏幕閱讀器的用戶無法知道元素之間的關(guān)系，也無法知道它們其實(shí)是列表的一部分（大部分的屏幕閱讀器都會通知用戶列表元素的數(shù)量）；

被破壞的語義也會讓搜索引擎很難明白你的內(nèi)容；

如果用戶在禁用 CSS 的時候訪問你的內(nèi)容（例如，網(wǎng)速不佳的時候），在瀏覽頁面時可能會很困惑，因?yàn)樗麄冎豢吹揭幌盗胁幌嚓P(guān)的 div。

最重要的規(guī)則是，你絕對不能為了看上去好看而放棄語義。

解決方案

目前的解決方案通過為未排序的列表添加了 CSS 規(guī)則，創(chuàng)建出了嵌套的網(wǎng)格。

.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 0.625rem;
}
.container > * {
 grid-column: 1 / span 3;
}
ul {
 display: inherit;
 grid-template-columns: inherit;
 grid-gap: inherit;
}

在如下例子中，你可以看到嵌套的網(wǎng)格和父級網(wǎng)格是如何關(guān)聯(lián)的。元素按照期望的樣子排列出來了，但是此時，文檔始終保留著它的語義。

總結(jié)

簡單的 CSS Grid 布局可能不會導(dǎo)致可訪問性的問題。但是當(dāng)你想要改變視覺順序或者創(chuàng)建多層網(wǎng)格的時候，問題就可能暴露出來。解決這些問題通常不會很麻煩，所以這樣做來修復(fù)那些可訪問性問題是很值得的，因?yàn)檫@樣你能夠讓那些使用輔助工具的用戶更易讀懂你的內(nèi)容。

稿件來源：阿里云開發(fā)者社區(qū)（點(diǎn)擊下面“了解更多”查看原文）

何把網(wǎng)頁上的內(nèi)容用javascript來實(shí)現(xiàn)截圖？今天分享的html2canvas就可以。

介紹

在微信項(xiàng)目中經(jīng)常會遇到動態(tài)生成海報(bào)的需求，Web前端合成圖片往往會使用canvas。canvas雖然強(qiáng)大，但用來合成海報(bào)非常繁瑣，一不小心就幾百行代碼了。而html2canvas.js是一款輕松地將HTML+CSS寫成的布局直接轉(zhuǎn)換成canvas，生成可保存分享的圖片。

html2canvas.js官網(wǎng)截圖

特點(diǎn)

兼容現(xiàn)代瀏覽器，手機(jī)項(xiàng)目可放心大膽使用；
官網(wǎng)文檔清晰簡單，用法簡單支持npm/yarn和cdn引入，有充足的代碼例子；
支持部分常用的CSS屬性，配合圖片使用幾乎能滿足所有動態(tài)生成海報(bào)的需求。

使用體驗(yàn)

這是一個把HTML的DOM結(jié)構(gòu)根據(jù)所支持的CSS樣式生成canvas的js開源庫，CSS的寫法千變?nèi)f化，不同的布局有很多不同的寫法，因此html2canvas是不能100%還原網(wǎng)頁的樣式，因此不用用于像電腦屏幕截圖這樣的需求中。

官網(wǎng)關(guān)于支持css的說明

使用的時候要注意查看所支持的CSS屬性，盡量使用這些屬性來寫布局，不支持的效果可以嘗試用圖片來實(shí)現(xiàn)。只要產(chǎn)品經(jīng)理腦子在線，目測幾乎沒有什么海報(bào)需求是實(shí)現(xiàn)不了的。

官網(wǎng)是英文的，寫得很專業(yè)，谷歌翻譯閱讀無壓力。

免費(fèi)使用說明

html2canvas 由開發(fā)者 Niklas von Hertzen 創(chuàng)建，基于MIT許可開源，可以免費(fèi)使用在任何項(xiàng)目。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。

↓↓點(diǎn)【了解更多】查看本次分享的相關(guān)網(wǎng)址。

在線咨詢

上一篇：教你5分鐘寫一個屬于自己的網(wǎng)頁
下一篇：前端加薪從熟悉SEO排名開始，來先吃透這10個HTM

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

小白都覺得好用的CSS布局屬性Grid

一、認(rèn)識Grid屬性

1.認(rèn)識網(wǎng)格容器/網(wǎng)格項(xiàng)目/網(wǎng)格軌道/軌道間距

2.自定義項(xiàng)目在容器中的顯示位置

1. 值中只有span

2. 值中有span和編號

3.minmax()函數(shù)

源順序獨(dú)立性

視覺效果與邏輯的重排序

如何讓布局的可訪問性更好

語義丟失怎么辦

總結(jié)

介紹

特點(diǎn)

使用體驗(yàn)

免費(fèi)使用說明

您的項(xiàng)目需求