HTMLCSS學(xué)習(xí)筆記（二十三）-GRID布局

RID布局

它將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局 ?

Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內(nèi)部多個(gè)項(xiàng)目的位置。但是，它們也存在重大區(qū)別。

Flex 布局是軸線布局，只能指定"項(xiàng)目"針對軸線的位置，可以看作是一維布局。

Grid 布局則是將容器劃分成"行"和"列"，產(chǎn)生單元格，然后指定"項(xiàng)目所在"的單元格，可以看作是二維布局。

grid布局預(yù)熱

容器和項(xiàng)目

<section>
	<div>
		<p></p>
	</div>
	<div>
		<p></p>
	</div>
	<div>
		<p></p>
	</div>
</section>
<!-- 以上代碼section為容器、div為項(xiàng)目 （項(xiàng)目不包括p標(biāo)簽） -->

行和列

容器里面的水平區(qū)域稱為"行"，垂直區(qū)域稱為"列"。

單元格

行和列的交叉區(qū)域，稱為"單元格"。

網(wǎng)格線

劃分網(wǎng)格的線，稱為"網(wǎng)格線"。水平網(wǎng)格線劃分出行，垂直網(wǎng)格線劃分出列。

GRID屬性

容器屬性:添加在容器元素

1、啟動(dòng)網(wǎng)格布局

display:grid
/*
 屬性值：
  grid  為塊狀網(wǎng)格容器 （容器自上而下排列）
  line-grid  為內(nèi)聯(lián)網(wǎng)格容器（容器橫向排列）
*/

2、劃分行和列

grid-template-columns:
grid-template-rows:

屬性值：絕對大小(根據(jù)列數(shù)或者行數(shù)確定值的個(gè)數(shù)) 例：200px 200px 200px

grid-template-columns:200px 200px 200px
grid-template-rows:200px 200px 200px

屬性值：百分比（根據(jù)列數(shù)或者行數(shù)確定值的個(gè)數(shù)）例：33.33% 33.33% 33.33%

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當(dāng)項(xiàng)目寬高固定，容器不固定的情況下，自動(dòng)填充網(wǎng)格列數(shù)
*/

功能函數(shù)：repeat()

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當(dāng)項(xiàng)目寬高固定，容器不固定的情況下，自動(dòng)填充網(wǎng)格列數(shù)
*/

auto-fill關(guān)鍵字( 自動(dòng)填充 )

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當(dāng)項(xiàng)目寬高固定，容器不固定的情況下，自動(dòng)填充網(wǎng)格列數(shù)
*/

fr關(guān)鍵字(列寬片段)

為了方便表示比例關(guān)系，網(wǎng)格布局提供了fr關(guān)鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示后者是前者的兩倍。

grid-template-columns:1fr 3fr 1fr;
grid-template-rows:repeat(3,100px);

minmax() 功能函數(shù)

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
/*
 minmax(100px, 1fr)表示列寬不小于100px，不大于1fr
*/

auto 關(guān)鍵字自動(dòng)填充

grid-template-columns:30px auto 20px;
grid-template-rows:repeat(3,100px);

網(wǎng)格線名稱

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
/*
指定網(wǎng)格布局為3行x3列，因此有4根垂直網(wǎng)格線和4根水平網(wǎng)格線。方括號(hào)里面依次是這八根線的名字。
*/

3、設(shè)置行間距 || 列間距

grid-row-gap:20px /* 行間距 */
grid-column-gap:20px /* 列間距 */
grid-gap:30px 30px /* 復(fù)合式寫法 */
?
/*注：新版本已經(jīng)省略 grid- 前綴    row-gap \  column-gap  \  gap*/

指定"區(qū)域"（area），一個(gè)區(qū)域由單個(gè)或多個(gè)單元格組成。

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
 'd e f'
 'g h i';
?
/*
 將整個(gè)網(wǎng)格容器分為9個(gè)區(qū)域，每個(gè)區(qū)域?qū)?yīng)一個(gè)單元格
 通過grid-area 指定項(xiàng)目名稱。
*/

display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
grid-template-areas: 'a a a'
      '. . b'
      '. c c';

5、規(guī)劃子元素放置的順序（默認(rèn)為先排行后排列）

grid-auto-flow: column | row;
/*
 row dense和column dense。
 這兩個(gè)值主要用于，某些項(xiàng)目指定位置以后，剩下的項(xiàng)目怎么自動(dòng)放置。
*/

6、設(shè)置單元格內(nèi)容在單元格內(nèi) 水平 | 垂直的對齊方式

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items:  <justify-items>  <align-items>   /*復(fù)合式寫法*/
/*
 start：對齊單元格的起始邊緣。
    end：對齊單元格的結(jié)束邊緣。
    center：單元格內(nèi)部居中。
    stretch：拉伸，占滿單元格的整個(gè)寬度（默認(rèn)值）。
*/

7、設(shè)置整個(gè)內(nèi)容區(qū)域在容器里面的水平 | 垂直對齊方式

justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content:  <justify-content>  <align-content>   /* 復(fù)合式寫法 */
?
/*
 start - 對齊容器的起始邊框。
 end - 對齊容器的結(jié)束邊框。
 center - 容器內(nèi)部居中。
 stretch - 項(xiàng)目大小沒有指定時(shí)，拉伸占據(jù)整個(gè)網(wǎng)格容器。
 space-around - 每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與容器邊框的間隔大一倍。
 space-between - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間沒有間隔。
 pace-evenly - 項(xiàng)目與項(xiàng)目的間隔相等，項(xiàng)目與容器邊框之間也是同樣長度的間隔。
*/

項(xiàng)目屬性：添加在子元素上面

指定項(xiàng)目的四個(gè)邊框，分別定位在哪根網(wǎng)格線。

grid-column-start
grid-column-end
grid-row-start
grid-row-end
?
/*
 grid-column-start屬性：左邊框所在的垂直網(wǎng)格線
 grid-column-end屬性：右邊框所在的垂直網(wǎng)格線
 grid-row-start屬性：上邊框所在的水平網(wǎng)格線
 grid-row-end屬性：下邊框所在的水平網(wǎng)格線
*/

grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;

2、grid-column ， grid-row

grid-column屬性是grid-column-start和grid-column-end的合并簡寫形式 grid-row屬性是grid-row-start屬性和grid-row-end的合并簡寫形式。

SS Grid Generator

CSS Grid Generator是一個(gè)由Sarah Drasner創(chuàng)建的免費(fèi)工具。它是一個(gè)可視化設(shè)計(jì)工具，允許咱們創(chuàng)建一個(gè)基本的 grid 布局，然后就可以使用生成對應(yīng)的代碼，幫助咱們快速布局。

第一次進(jìn)入是界面是這樣子的：

CSS Grid 布局示例

當(dāng)我正在學(xué)習(xí)一些東西時(shí)，我發(fā)現(xiàn)最好的學(xué)習(xí)方法是使用現(xiàn)有的工具構(gòu)建實(shí)用的東西。在本文中，咱們先從一個(gè)簡單的布局開始，然后使用CSS Grid Generator創(chuàng)建在實(shí)際項(xiàng)目中使用所需的代碼。

首先從一個(gè)典型的布局開始，如下所示：

接著在 CSS Grid Generator 界面的右側(cè)更新對應(yīng)的以下內(nèi)容：

行: 4
列: 3
列間距: 20
行間距: 20

間距讓咱們的內(nèi)容之間有一定的空白?？梢灾皇褂昧虚g距，但我想在 Header 和 Footer 之前留出一些空白，所以還同時(shí)使用行間距。

接下來，就是需要定義應(yīng)用程序的不同區(qū)域。在 CSS Grid Generator 中，可以單擊并拖動(dòng)到需要合并地方來創(chuàng)建一個(gè)區(qū)域。咱們希望Footer跨越整個(gè)網(wǎng)格，側(cè)邊欄占用一個(gè)單元格，主內(nèi)容區(qū)域跨越2列，F(xiàn)ooter 跨越4列,最終效果，如下：

這看起來有點(diǎn)像咱們想要的布局，但仍然需要定義一些具體的尺寸。在CSS Grid Generator 會(huì)注意到每行和每列旁邊都有一個(gè)輸入框，可用于設(shè)置特定大小。

Header: 100px height
Sidebars: 200px width
Footer: 50px height

這看起來更像更像咱們想要的布局，但是你可能會(huì)問1fr是多少。

軌道可以用任何長度單位來定義。Grid還引入了一個(gè)額外的長度單位，以幫助各位創(chuàng)建靈活的Grid軌道。新的fr單元表示網(wǎng)格容器中可用空間的一小部分。

第二行的1fr會(huì)告訴區(qū)域占用剩余的可用空間。如果將容器設(shè)置為100vh，就會(huì)占據(jù)整個(gè)頁面的內(nèi)容，列也是如此。

CSS Grid Generated 生成的代碼

點(diǎn)擊“請給我示例中的代碼”就可以查看對應(yīng)布局生成的 CSS 代碼：

創(chuàng)建一個(gè)simple-layout.htm并添加以下代碼：

接下來添加上面生成的 CSS:

接著添加對應(yīng)的標(biāo)簽：

最后添加下面的CSS，它將為.div1 - .div5添加一些背景色：

div:not(.parent) {
  padding: 10px;
  background-color: rgb(199, 199, 199);
}

運(yùn)行：

這看起來很好，但你希望它占據(jù)整個(gè)瀏覽器窗口。所以需要向.parent類添加height: 100vh：

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: 100px 1fr 50px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
}

最終效果：

網(wǎng)格軌道(Grid Track) 加餐

兩個(gè)相鄰的網(wǎng)絡(luò)線之間為網(wǎng)絡(luò)軌道。

圖中的同方向 1 和 2， 2 和 3 都是相鄰的網(wǎng)絡(luò)線，當(dāng)然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網(wǎng)絡(luò)線。

相鄰的網(wǎng)絡(luò)線為網(wǎng)格軌道，如下，黑色1 和 2 之間就構(gòu)成了網(wǎng)絡(luò)軌道(背景深橘色)：

上面總共有 5 個(gè)網(wǎng)絡(luò)軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個(gè)。

網(wǎng)格單元(Grid Cell) 加餐

兩個(gè)相鄰的列網(wǎng)絡(luò)線和兩個(gè)相鄰的行網(wǎng)絡(luò)線組成的就是網(wǎng)絡(luò)單元，如下面的深橘色背景就是網(wǎng)絡(luò)單元。

網(wǎng)絡(luò)單元要與網(wǎng)絡(luò)項(xiàng)(項(xiàng)目)區(qū)別開來，網(wǎng)絡(luò)項(xiàng)是 Html 中可以找的到 Dom 元素，網(wǎng)絡(luò)單元是在定義容器的時(shí)候，它就會(huì)分割出來的一個(gè)一個(gè)單元格。

網(wǎng)格區(qū)域(Grid Area) 加餐

四個(gè)網(wǎng)絡(luò)線包圍的總空間。

fr單位(加餐)

剩余空間分配數(shù)，用于在一系列長度值中分配剩余空間，如果多個(gè)已指定了多個(gè)部分，則剩下的空間根據(jù)各自的數(shù)字按比例分配。

rid是css3推出的新的布局方式，相比flex，它更適合二維布局，使代碼簡潔、方便。

以下代碼便是由grid定義的布局示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css之grid布局</title>
        <style type="text/css">
            .layout {
                display: grid;
                gap: 12px;
                grid-template-rows: 48px 5fr 1fr;
                grid-template-columns: 1fr 3fr 1fr;
                grid-template-areas: 
                'header header header'
                'nav article aside'
                'nav footer footer';
            }
            header, footer, nav, article, aside {
                background-color: cadetblue;
                color: chartreuse;
                border: 2px solid cornflowerblue;
                border-radius: 8px;
                padding: 12px;
            }
            header {
                grid-area: header;
            }
            nav {
                grid-area: nav;
            }
            article {
                grid-area: article;
            }
            aside {
                grid-area: aside;
            }
            footer {
                grid-area: footer;
            }
        </style>
    </head>
    <body>
        <div class="layout">
            <header>Header</header>
            <nav>Nav</nav>
            <article>Article</article>
            <aside>Aside</aside>
            <footer>Footer</footer>
        </div>
    </body>
</html>

效果如圖所示

要使用grid布局，首先設(shè)置display為grid，使用如下所示：

.layout {
    display: grid;
}

gap是grid布局網(wǎng)格的間隙，使用如下所示：

.layout {
    gap: 12px;
}

這里的間隙為12px

grid-template-rows是定義grid布局網(wǎng)格每行的高度，使用如下所示：

.layout {
    grid-template-rows: 48px 5fr 1fr;
}

grid-template-columns是定義grid布局網(wǎng)格每列的寬度，使用如下所示：

.layout {
    grid-template-columns: 1fr 3fr 1fr;
}

注：

px是像素，是一絕對單位
fr是grid網(wǎng)關(guān)布局中，引入的一種新的長度單位fraction，它表示grid布局中剩余空間的一部分
1fr表示100%的剩余空間
1fr 3fr 6fr 分別表示10% 30% 60%的的剩余空間
grid-area是對grid網(wǎng)格元素的命名，grid-template-areas是對grid網(wǎng)格元素的布局，兩則配合使用，使用如下所示

css部分

.layout {
    grid-template-areas: 
        'header header header'
        'nav article aside'
        'nav footer footer';
}
header {
    grid-area: header;
}
nav {
    grid-area: nav;
}
article {
    grid-area: article;
}
aside {
    grid-area: aside;
}
footer {
    grid-area: footer;
}

html部分

在線咨詢

上一篇：前端三賤客-每個(gè)人都會(huì)碰到的問題（html+css）
下一篇：HTML 顏色

您的項(xiàng)目需求

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

整合營銷服務(wù)商