【CSS】最強大的布局之grid布局精講

文章内包含個人了解，如有錯誤請指出。

編輯

【CSS】最強大的布局之grid布局精講

編輯

往期文章

【css進階】變量詳解

輪播圖swiper架構的基本使用

【Transform3D】轉換詳解（看完就會）

【css動畫】移動的小車

【CSS3】 float浮動與position定位常見問題（個人筆記）

如何完成響應式布局，有幾種方法？看這個就夠了

詳解 CSS3中最好用的布局方式——flex彈性布局（看完就會）

[前端CSS高頻面試題]如何畫0.5px的邊框線（詳解）CSS3基礎屬性大全

CSS3動畫屬性 animation詳解（看完就會）

CSS3 transform 2D轉換之移動旋轉縮放（詳細講解看完就會）

CSS3 Z—Index 詳解

CSS3 positon定位詳解（通俗易懂）

前言

介紹

網格布局（Grid）是最強大的 CSS 布局方案。

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

Grid 布局則是将容器劃分成 “行” 和 “列” 産生單元格，然後指定 “項目所在” 的單元格，可以看作是二維布局。Grid 布局遠比 Flex 布局強大。

基本概念

容器和項目

采用網格布局的區域，稱為 “容器”（container）。容器内部采用網格定位的子元素，稱為 “項目”（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

【CSS】最強大的布局之grid布局精講

上面代碼中，最外層的

<div>

元素就是容器，内層的三個

<div>

元素就是項目。

注意：項目隻能是容器的頂層子元素，不包含項目的子元素，比如上面代碼的

<p>

元素就不是項目。Grid 布局隻對項目生效。

行和列

整個grid頁面布局是由行和列構成的，在使用grid布局時，需要單獨設計行和列。

單元格

每行每列都會分布單元格，在單元格内我們可以添加想要的内容。

網格線

【CSS】最強大的布局之grid布局精講

編輯

格子的邊框為網格線，分為上下網格線和左右網格線。

屬性

父容器屬性

display 屬性

隻對直接子元素有效。

display: grid;
display: inline-grid;

【CSS】最強大的布局之grid布局精講

給父元素添加display: grid;屬性，塊樣式網格布局。

還可以使用display: inline-grid屬性，行内樣式網格布局。

注意，設為網格布局以後，容器子元素（項目）的 float 、 display: inline-block 、 display: table-cell 、 vertical-align 和 column-* 等設定都将失效。

grid-template-columns 屬性，grid-template-rows 屬性

當我們設定了grid布局之後，我們需要設定行和列的大小。

grid-template-columns 設定列的數量以及大小

grid-template-rows 設定行的數量以及大小

<style>.container {
            display: grid;
            /* 設定列數 同時設定了列的寬度 */
            grid-template-columns: 100px 100px 100px;
            /* 設定行數 同時設定了行的寬度 如果沒有設定行數将會自動根據
            元素數量自動設定*/
            grid-template-rows: 100px 100px 100px;
        }

        .item {
            border: 1px</style>
</head>

<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>
</body>

【CSS】最強大的布局之grid布局精講

編輯

不設定行，隻設定列時。

【CSS】最強大的布局之grid布局精講

編輯

除了設定絕對值之外，也能設定百分比數（根據父級大小的百分比）等。

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
    /* repeat 兩個值第一個值是重複次數  第二個是具體指
    上下兩個效果是一樣的 */
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
    /* auto-fill 表示自動填充   可以最大限度的填滿 父級容器
    用多個100px的大小填滿寬度*/
  grid-template-columns: repeat(auto-fill, 100px);
    /* fr 是一個相對機關 大家可以了解為所占的份數  
        将寬度分成兩份占滿  類似flex布局的裡的flex屬性。*/
    grid-template-columns: 1fr 1fr;
    /* minmax（）表示一個範圍 第一個值為最小多長  第二個數為最大*/
    grid-template-columns: 1fr 2fr minmax(200px, 3fr);
    /* auto關鍵字 填充剩餘空間
    下面這兩個相等*/
    grid-template-columns: 100px auto 100px;
    grid-template-columns: 100px 1fr 100px;
}

【CSS】最強大的布局之grid布局精講

還可以給網格線命名，每個【名字】相當于一條線。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px

【CSS】最強大的布局之grid布局精講

row-gap 屬性，column-gap 屬性，gap 屬性

row-gap 屬性，設定行與行的距離。

column-gap 屬性，設定列與列的距離。

gap 屬性是上面兩個屬性的合并屬性，第一個值是行，第二個是列。

.container {
            row-gap: .625rem;
            column-gap: .625rem;
            /* 上面兩個的效果等于下面這一個屬性  
                如果隻寫一個值，第二個值則等于第一個 */
            gap: 0.625rem 0.625rem;

        }

【CSS】最強大的布局之grid布局精講

grid-template-areas 屬性

定義表格區域

.container {
一個格子一個區域
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
定義三個區域
 rid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
 .item1 {
            grid-area: a;
            background-color: blue;
        }

        .item {
            border: 1px solid black;
            background-color: red;
        }

如果某些區域不需要利用，則使用 “點”（.）表示。

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
}

【CSS】最強大的布局之grid布局精講