CSS Grid 是一種為 Web 開發(fā)創(chuàng)建網(wǎng)站布局的方式。它已經(jīng)存在了很多年，隨著更多瀏覽器的支持，它終于變得越來越流行。

接下來我們將了解下 CSS Grid 及其工作原理。了解下如何使用它。

CSS 網(wǎng)格簡介

隨著布局系統(tǒng)的不斷發(fā)展，CSS 也取得了長足的進(jìn)步。隨著 CSS Grid 的發(fā)布，我們終于有了一個(gè)強(qiáng)大的工具來創(chuàng)建二維布局。如今，設(shè)計(jì)師和開發(fā)人員正在使用各種布局系統(tǒng)，如 Flexbox 甚至純 CSS 來創(chuàng)建令人驚嘆的響應(yīng)式網(wǎng)站。但是當(dāng)涉及到某些任務(wù)時(shí)，這些方法中的每一種都有其自身的局限性。在這種情況下，CSS Grid 可以派上用場！

CSS 網(wǎng)格架構(gòu)

有兩種使用 CSS 網(wǎng)格布局的方法：隱式和顯式。使用隱式網(wǎng)格，您只需定義所需的列數(shù)，瀏覽器將自動(dòng)創(chuàng)建網(wǎng)格。使用顯式網(wǎng)格，您可以定義列數(shù)和行數(shù)。這使您可以更好地控制布局，但設(shè)置起來可能更復(fù)雜。

它是一個(gè)二維布局系統(tǒng)。這意味著它可以處理列和行。然而，與主要是一維的傳統(tǒng) CSS 布局不同，CSS Grid 旨在同時(shí)處理兩個(gè)維度。

它是一個(gè)基于容器的布局系統(tǒng)。這意味著它適用于作為容器元素的子元素的元素。容器元素定義網(wǎng)格，子元素放置在網(wǎng)格單元格中。

它是一個(gè)響應(yīng)式布局系統(tǒng)。這意味著它可以適應(yīng)不同的屏幕尺寸和分辨率。CSS Grid 也很靈活，這意味著它可以用于從簡單到復(fù)雜的各種布局。

它是在現(xiàn)有的 CSS 盒子模型之上構(gòu)建的。這意味著它可以與任何現(xiàn)有的 CSS 代碼庫一起使用。但是，它還具有一些使其獨(dú)一無二的新功能。

CSS Grid 獨(dú)一無二的功能

• 提供使用基于行的定位將項(xiàng)目放置在網(wǎng)格上的能力。這使得創(chuàng)建非常復(fù)雜的布局成為可能，而無需使用傳統(tǒng)的浮動(dòng)或絕對(duì)定位。
• 提供跨越列和行的能力。換句話說，您可以擁有跨越多列或多行的項(xiàng)目。
• 提供通過使用行號(hào)和名稱或通過定位網(wǎng)格的特定區(qū)域?qū)㈨?xiàng)目放置在特定位置的能力。還包括一個(gè)算法來控制未明確放置在網(wǎng)格上的項(xiàng)目的放置。
• 提供控制項(xiàng)目放置在網(wǎng)格區(qū)域內(nèi)后如何對(duì)齊以及網(wǎng)格整體對(duì)齊方式的能力。
• 提供使用像素創(chuàng)建使用固定軌道大小的網(wǎng)格的能力 - 將網(wǎng)格設(shè)置為適合您所需布局的指定像素。您還可以使用百分比或 fr 單位來指定靈活的軌道大小。

所有這些功能在正確使用時(shí)都可以創(chuàng)建在任何屏幕尺寸上都能很好顯示的響應(yīng)式布局。

使用 CSS 網(wǎng)格的好處

在構(gòu)建網(wǎng)頁時(shí)使用 CSS Grid 有很多好處。主要好處之一是它可以更輕松地創(chuàng)建復(fù)雜的布局。使用 CSS Grid，您可以創(chuàng)建具有多列和多行的布局，并且可以輕松控制頁面上每個(gè)元素的大小和位置。

CSS Grid 的另一個(gè)好處是它有助于保持代碼整潔有序。使用傳統(tǒng)的 CSS，您的代碼很容易變得混亂且難以閱讀。但是，使用 CSS Grid，您的所有樣式都應(yīng)用于網(wǎng)格，這使您的代碼更易于閱讀和理解。

創(chuàng)建網(wǎng)格布局

您需要首先定義一個(gè)容器元素并為其分配一個(gè)類名。此元素將包含您的所有內(nèi)容。在容器內(nèi)部，您將定義一系列子元素，每個(gè)子元素將占據(jù)網(wǎng)格的特定區(qū)域。您可以使用各種屬性來控制這些元素的大小和位置。之后，將以下 CSS 代碼添加到您的樣式表中：

.container {
    display: grid;
}

這將創(chuàng)建一個(gè)網(wǎng)格布局，其中一列包含所有子元素。

網(wǎng)格父屬性

網(wǎng)格父元素是應(yīng)用了 display: grid 屬性的元素。它可以是任何類型的元素。

網(wǎng)格父元素的屬性：

• grid-template-columns：此屬性定義列數(shù)和每列的寬度。
• grid-template-rows：此屬性定義行數(shù)和每行的高度。
• grid-gap：此屬性定義列和行之間的空間。

網(wǎng)格子屬性

• CSS Grid 中的子屬性用于定義網(wǎng)格項(xiàng)的大小、位置和其他方面。這些是可以應(yīng)用于網(wǎng)格元素的一些主要子屬性：
• grid-column：此屬性用于指定網(wǎng)格中列的大小和位置。此屬性的語法是“ grid-column: ”。
• grid-row：該屬性用于指定行在網(wǎng)格中的大小和位置。此屬性的語法是“ grid-row: ”。
• grid-area：該屬性用于指定網(wǎng)格中某個(gè)區(qū)域的大小和位置。此屬性的語法是“ grid-area: ”。

使用列和行

網(wǎng)格允許您指定布局中的列數(shù)和行數(shù)，然后將元素放置在這些列和行中。

grid-template-columns 您可以使用和 grid-template-rows 屬性控制列和行的寬度。例如，您可以使用以下代碼創(chuàng)建三列布局：

.container {
    display: grid;
    grid-template-columns: 100px 200px 300px;
}

您還可以使用百分比或分?jǐn)?shù)來控制列寬。例如，以下代碼將創(chuàng)建三列，第一列的寬度是第二列的兩倍，第三列的寬度是第三列的三倍：

.container {
    display: grid;
    grid-template-columns: 50% 33.33% 25%;
}

在布局中指定列數(shù)和行數(shù)后，您可以使用 grid-column 和 grid-row 屬性將元素放置在這些列和行中。例如，如果您有一個(gè)三列布局，您可以使用以下代碼在第一列中放置一個(gè)元素：

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns, each 1/3 width of the container */
    grid-column: 1;
}

結(jié)論

如果你沒有使用過 grid 布局，或者使用過，但是用的不多的話，那么我建議您可以多嘗試下，因?yàn)楫?dāng)你用的多的時(shí)候，你就會(huì)發(fā)現(xiàn)，它是真的好用。