HTMLCSS學習筆記（二十三）-GRID布局

RID布局

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

Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。

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

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

grid布局預熱

容器和項目

<section>
	<div>
		<p></p>
	</div>
	<div>
		<p></p>
	</div>
	<div>
		<p></p>
	</div>
</section>
<!-- 以上代碼section為容器、div為項目 （項目不包括p標簽） -->

行和列

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

單元格

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

網格線

劃分網格的線，稱為"網格線"。水平網格線劃分出行，垂直網格線劃分出列。

GRID屬性

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

1、啟動網格布局

display:grid
/*
 屬性值：
  grid  為塊狀網格容器 （容器自上而下排列）
  line-grid  為內聯網格容器（容器橫向排列）
*/

2、劃分行和列

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

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

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

屬性值：百分比（根據列數或者行數確定值的個數）例：33.33% 33.33% 33.33%

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/

功能函數：repeat()

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/

auto-fill關鍵字( 自動填充 )

grid-template-columns：repeat(auto-fill,33.33%);
/*
 當項目寬高固定，容器不固定的情況下，自動填充網格列數
*/

fr關鍵字(列寬片段)

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

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

minmax() 功能函數

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

auto 關鍵字自動填充

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

網格線名稱

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

3、設置行間距 || 列間距

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

指定"區域"（area），一個區域由單個或多個單元格組成。

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';
?
/*
 將整個網格容器分為9個區域，每個區域對應一個單元格
 通過grid-area 指定項目名稱。
*/

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

5、規劃子元素放置的順序（默認為先排行后排列）

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

6、設置單元格內容在單元格內水平 | 垂直的對齊方式

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

7、設置整個內容區域在容器里面的水平 | 垂直對齊方式

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>   /* 復合式寫法 */
?
/*
 start - 對齊容器的起始邊框。
 end - 對齊容器的結束邊框。
 center - 容器內部居中。
 stretch - 項目大小沒有指定時，拉伸占據整個網格容器。
 space-around - 每個項目兩側的間隔相等。所以，項目之間的間隔比項目與容器邊框的間隔大一倍。
 space-between - 項目與項目的間隔相等，項目與容器邊框之間沒有間隔。
 pace-evenly - 項目與項目的間隔相等，項目與容器邊框之間也是同樣長度的間隔。
*/

項目屬性：添加在子元素上面

指定項目的四個邊框，分別定位在哪根網格線。

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

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是一個由Sarah Drasner創建的免費工具。它是一個可視化設計工具，允許咱們創建一個基本的 grid 布局，然后就可以使用生成對應的代碼，幫助咱們快速布局。

第一次進入是界面是這樣子的：

CSS Grid 布局示例

當我正在學習一些東西時，我發現最好的學習方法是使用現有的工具構建實用的東西。在本文中，咱們先從一個簡單的布局開始，然后使用CSS Grid Generator創建在實際項目中使用所需的代碼。

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

接著在 CSS Grid Generator 界面的右側更新對應的以下內容：

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

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

接下來，就是需要定義應用程序的不同區域。在 CSS Grid Generator 中，可以單擊并拖動到需要合并地方來創建一個區域。咱們希望Footer跨越整個網格，側邊欄占用一個單元格，主內容區域跨越2列，Footer 跨越4列,最終效果，如下：

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

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

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

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

第二行的1fr會告訴區域占用剩余的可用空間。如果將容器設置為100vh，就會占據整個頁面的內容，列也是如此。

CSS Grid Generated 生成的代碼

點擊“請給我示例中的代碼”就可以查看對應布局生成的 CSS 代碼：

創建一個simple-layout.htm并添加以下代碼：

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

接著添加對應的標簽：

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

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

運行：

這看起來很好，但你希望它占據整個瀏覽器窗口。所以需要向.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;
}

最終效果：

網格軌道(Grid Track) 加餐

兩個相鄰的網絡線之間為網絡軌道。

圖中的同方向 1 和 2， 2 和 3 都是相鄰的網絡線，當然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網絡線。

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

上面總共有 5 個網絡軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個。

網格單元(Grid Cell) 加餐

兩個相鄰的列網絡線和兩個相鄰的行網絡線組成的就是網絡單元，如下面的深橘色背景就是網絡單元。

網絡單元要與網絡項(項目)區別開來，網絡項是 Html 中可以找的到 Dom 元素，網絡單元是在定義容器的時候，它就會分割出來的一個一個單元格。

網格區域(Grid Area) 加餐

四個網絡線包圍的總空間。

fr單位(加餐)

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

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布局，首先設置display為grid，使用如下所示：

.layout {
    display: grid;
}

gap是grid布局網格的間隙，使用如下所示：

.layout {
    gap: 12px;
}

這里的間隙為12px

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

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

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

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

注：

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

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部分

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商