整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS Grid接管了Web設(shè)計(jì)的世界。互聯(lián)網(wǎng)上有大量的關(guān)于它的教程，博客和文章，有足夠多的知識來源。但是其中大多數(shù)都會用很少的實(shí)際示例來教你基礎(chǔ)知識。因此，在本文章中，我們將在學(xué)習(xí)過程中查看示例。
CSS Grid允許我們使用網(wǎng)格內(nèi)的瀏覽器功能編寫更好的布局。在使用CSS Grid之前，我們要么使用自己的自定義網(wǎng)格系統(tǒng)，要么使用Bootstrap之類的東西。雖然使用其他選項(xiàng)的網(wǎng)格也可以正常工作，但是使用CSS網(wǎng)格可以減輕我們在這些解決方案中面臨的大部分麻煩。CSS Grid使開發(fā)簡單和復(fù)雜的布局變得輕而易舉。在此文章中，我們將學(xué)習(xí)一些基本術(shù)語，然后繼續(xù)介紹一個簡單的布局示例。
與CSS Grid相關(guān)的基本術(shù)語如下：（1）Columns；（2）Rows；（3）Cells；（4）Grid Lines；（5）Gutter。
上圖中說明了所有術(shù)語。此示例為3x2列網(wǎng)格，表示3列和2行。
既然基本概念已不復(fù)存在，我們將使用這些概念進(jìn)行如下示例布局：
如你所見，有一個頁眉和頁腳。然后，中心行在右側(cè)的第一列側(cè)欄中有3列導(dǎo)航欄，中間是主要內(nèi)容區(qū)域（占據(jù)了該行的大部分）。以下是此示例的示例HTML。
現(xiàn)在，HTML已經(jīng)不合適我們了，讓我們深入研究CSS。首先，讓我們給它一些樣式，以便我們的HTML像上面一樣。這些CSS規(guī)則不是CSS網(wǎng)格的一部分，因此你可以根據(jù)需要省略它們。
如你所見，我正在對包裝容器中的所有項(xiàng)目進(jìn)行樣式設(shè)置。我將其背景色設(shè)置為orange和給定，bottom而right margins.display flex只是通過設(shè)置justify-content和align-items來使項(xiàng)目居中對齊center。接下來，讓我們進(jìn)入其中的CSS網(wǎng)格部分。
在上面的代碼中，我們將設(shè)置display為grid-。這就是我們將容器轉(zhuǎn)換為的方式grid。接下來，我們設(shè)置列和行。我們將使用grid-template-columns和grid-template-rows屬性來完成此操作。grid-template-columns允許我們使用適當(dāng)?shù)闹翟O(shè)置列數(shù)width。grid-template-rows允許我們根據(jù)rows自己的需要設(shè)置數(shù)量height。
在上面的示例中，共有3列，其中第一列采用1 fraction，第二列采用5 fraction，第三列2 fractions。無論我們將其分成多少件，單個小數(shù)單位都表示“一件”。如果你在上面查看相同的示例，則使用相同的概念rows。一共有三行，第一行包含，header該行將整個三列都包含在內(nèi)。第二行獲取導(dǎo)航，內(nèi)容和一旁的內(nèi)容，而頁腳轉(zhuǎn)到第三行和最后一行并占用所有三列。
這意味著第一行和最后一行占據(jù)相同的高度，即5 fractions。中排占據(jù)了其余的剩余高度。接下來，我們還將創(chuàng)建一個10px的裝訂線。我們可以使用grid-gap屬性在CSS Grid中進(jìn)行此操作。最后，我們?yōu)榘b容器設(shè)置一個高度。如果我們在瀏覽器中查看它，將會得到我們想要的結(jié)果，如下所示：
現(xiàn)在，通過設(shè)置頁眉和頁腳的一些屬性，使其看起來更像我們想要的樣子。我們將告訴頁眉和頁腳占用整個行。我們將使用grid-column-start和grid-column-end屬性來完成此操作，如下所示：
如你所見，頁眉和頁腳都從grid line1 開始，到grid line4 結(jié)束。這使它們可以占用整個行。這將產(chǎn)生我們想要的確切輸出，如下所示：
本文就是這樣。你可以在這里關(guān)注我以獲取更多文章。如果你喜歡它，請不要忘記在社交媒體上分享它。
css 繪制網(wǎng)格線背景，代碼如下：
.grid {
/* 網(wǎng)格單個格子大小 */
background-size: 35px 35px;
background-image:
/* 橫線 */
linear-gradient(0, #e6e6e6 1px, transparent 1px),
/* 豎線 */
linear-gradient(90deg, #e6e6e6 1px, transparent 1px);
}效果如下:
也可以變化一下，將豎線的顏色改為背景同色，制作筆記本橫線
先看一個例子：
網(wǎng)格布局
簡單來說網(wǎng)格布局就是display: grid，將元素定義為一個網(wǎng)格容器，內(nèi)部的子元素則變成網(wǎng)格元素。
display: grid; // 定義網(wǎng)格容器
grid-template-columns: 1fr 1fr 1fr; // 定義等寬的3列
grid-template-rows: 1fr 1fr; // 定義等高的兩行
grid-gap: .5em; // 給每個網(wǎng)格的單元格子間加上間隔fr是一種新的單位，代表每一行或者列的分?jǐn)?shù)單位（fraction unit）。
網(wǎng)格線（grid line）：網(wǎng)格線構(gòu)成了網(wǎng)格的框架。一條網(wǎng)格線可以水平或垂直，也可以位于一行或一列的任意一側(cè)。如果指定了grid-gap，它就位于網(wǎng)格線上。
網(wǎng)格軌道（grid track）：一個網(wǎng)格軌道是兩條相鄰網(wǎng)格線之間的空間。網(wǎng)格有水平軌道和垂直軌道。
網(wǎng)格單元（grid cell）：網(wǎng)格上的單個空間，水平和垂直的網(wǎng)格軌道交叉重疊的部分。
網(wǎng)格區(qū)域（grid area）：網(wǎng)格的矩形區(qū)域，由一個到多個網(wǎng)格單元組成。
網(wǎng)格軌道定義好后，要將每個網(wǎng)格元素放到特定的位置上。瀏覽器給網(wǎng)格里的每個網(wǎng)格線都賦予了編號。
網(wǎng)格線編號
可以在grid-column和grid-row屬性中間用網(wǎng)格線的編號指定網(wǎng)格元素的位置。如果想要一個網(wǎng)格元素在垂直方向上跨越1號網(wǎng)格線到3號網(wǎng)格線，就需要給元素設(shè)置grid-column：1 / 3。
需要注意的是，網(wǎng)格的高度是隨著內(nèi)容的高度自動計(jì)算的，比如上面a、c兩個網(wǎng)格分別占據(jù)了兩行，一共有5行，最終每行的高度是a、c內(nèi)容高度的最大值除以所占的行數(shù)（2），如果我們設(shè)置a只占一行，那么每一行的高度就會放大接近2倍：
有時候記錄所有網(wǎng)格線的編號實(shí)在太麻煩了，為了能簡單點(diǎn)，可以給網(wǎng)格線命名：
grid-template-column: [start] 2fr [center] 1fr [end];這條聲明定義了兩列的網(wǎng)格，三條垂直的網(wǎng)格線分別叫做start、center、end。之后在grid-colum中可以這樣寫：
grid-column: start / center;可以將網(wǎng)格區(qū)域命名，然后將元素放到指定的網(wǎng)格中：
命名網(wǎng)格區(qū)域
需要注意的是，網(wǎng)格的命名一定要準(zhǔn)確，并且不能少，不然網(wǎng)格就會錯位！
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
