前端入門-css Grid網格基礎知識

格布局的基本概念

CSS 網格布局引入了二維網格布局系統，可用于布局頁面主要的區域布局或小型組件。不同于flex布局，flex布局是一維的，適合單行或單列的布局，而css grid（網格）是在一個二維的平面上布局元素，類似于table，不同于table的是它的子元素不受限制可以自由定位。

Grid 和 flexbox 區別
CSS網格布局和彈性盒布局的主要區別在于彈性盒布局是為一維布局服務的（沿橫向或縱向的），而網格布局是為二維布局服務的（同時沿著橫向和縱向）。這兩個規格有一些相同的特性。如果你已經掌握如何使用彈性盒布局的話，你可能會想知道這些相似之處怎樣在能幫助你掌握網格布局。

什么是網格？

網格是一組相交的水平線和垂直線，它定義了網格的列和行。我們可以將網格元素放置在與這些行和列相關的位置上。它使網頁設計變得更加容易，而無需使用浮動和定位等其它技術。

CSS 網格布局具有以下特點：

使用固定或彈性的尺寸設置軌道的大小。
使用行號、行名或者標定一個網格區域來精確定位元素，同時還使用一種算法來控制未給出明確網格位置的元素。
對于在網格外面的內容，當必要時它會自動增加行和列，它會盡可能多地容納所有內容。
可以控制網格區域中元素的對齊方式，以及整個網格如何對齊。
在網格單元格中可以放置多個元素，或者可以部分地彼此重疊，使用 z-index屬性來控制重疊區域顯示的優先級。

CSS 網格常用術語：

網格容器
網格軌道
網格線
網格單元
網格區域
網格間距
嵌套網格

css Grid 是一個強大的規范，當與 CSS 的其他部分（如flexbox）結合使用時，可以幫助您創建以前不可能在 CSS 中構建的布局。這一切都是通過在網格容器上創建一個網格來開始的。

網格容器

我們可以使用 display：grid 或 display：inline-grid 來創建一個網格容器。如下示例：

html：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

塊級網格容器：

.grid-container {
  display: grid;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

顯示效果：

圖1

行內塊級網格容器：

.grid-container {
  display: inline-grid;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

效果顯示：

圖2

網格容器的所有直接子元素自動成為網格項，注意grid和inline-grid的區別。在瀏覽器中，元素轉為網格前看不出什么差異，因為網格給這些元素創建了一個單列網格。

你可以打開開發者工具，使用選擇工具選擇網格容器元素，此時會在元素節點旁看到一個grid的圖標，點擊后會看到頁面顯示網格布局。如下圖：

圖3

網格軌道

通過 grid-template-columns 和 grid-template-rows 屬性來定義網格中的行和列，一個網格軌道就是網格中任意兩條線之間的空間。

網格列軌道：

display: grid;
grid-template-columns: 200px 200px 200px;

顯示效果：

圖4

網格行軌道：

display: grid;
grid-template-rows: 200px 200px 200px;

圖5

比如圖5中，行一到行2之間的區域就是我們定義的行軌道。列1到列3之間的區域就是列軌道。從這里可以看出軌道不是指網格行或網格列，它們是有區別的，網格行和網格列是指網格項的水平線或垂直線，如下圖：

網格列

網格行

網格軌道的大小，可以使用固定單位，如px、cm、pt等，還可以使用百分比、auto、關鍵字（min-content、max-content）、函數（max（）、min（）、minmax（））等。此外還專門為網格指定一個 fr單位用來設置軌道大小，本節簡單介紹下fr單位，后面會單獨講述，這方面內容太多。

fr單位

fr單位代表網格容器中可用空間的一等份。下一個網格定義將創建三個相等寬度的軌道，這些軌道會隨著可用空間增長和收縮。fr 類似于 flex布局中的flex-grow。

如下示例:

display: grid;
grid-template-columns: 1fr 1fr 1fr;

圖6

如圖6中，每列等寬，平分網格容器可用的空間。當將其中一列設置不同的值，如下圖：

display: grid;
grid-template-columns: 1fr 2fr 1fr;

圖7

圖7中，一個3列的網格，其中列2的寬度是其它列的2倍。

網格線

應該注意的是，當我們定義網格時，我們定義的是網格軌道，而不是網格線。Grid 會為我們創建帶編號的網格線來讓我們來定位每一個網格元素。如下示例：

圖8

列之間的線稱為列線，行之間的線稱為行線。可用使用grid-column-start (en-US), grid-column-end (en-US), grid-row-start (en-US) 和 grid-row-end (en-US) 屬性，按照網格線編號進行定位，具體內容會在以后詳細介紹。

網格線的編號順序取決于文章的書寫模式。在從左至右書寫的語言中，編號為 1 的網格線位于最左邊。在從右至左書寫的語言中，編號為 1 的網格線位于最右邊。網格線也可以被命名，我們將在稍后的教程中看到如何完成這一操作。

網格單元

一個網格單元是在一個網格元素中最小的單位，從概念上來講其實它和表格里的一個單元格很像。現在再看回我們前面的一個例子，一旦一個網格元素被定義在一個父級元素當中，那么他的子級元素將會排列在每個事先定義好的網格單元中。在下面的圖中，我會將第一個網格單元作高亮處理。

網格區域

網格元素可以向行或列的方向擴展一個或多個單元，并且會創建一個網格區域。網格區域的形狀應該是一個矩形 - 也就是說你不可能創建出一個類似于“L”形的網格區域。下圖高亮的網格區域擴展了 2 列以及 2 行。

圖10

網格間距

每列/行之間的空間稱為網格間距。可使用 grid-column-gap (en-US) 和 grid-row-gap (en-US) 屬性來創建，或者直接使用兩個合并的縮寫形式 grid-gap (en-US)。在下面的例子中，我會創建一個橫向間距為 10px、縱向間距為 1em 的網格元素。

css：

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
}

html：

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

效果顯示：

圖11

間距使用的空間會在使用彈性長度 fr 的軌道的空間計算前就被留出來，間距的尺寸定義行為和普通軌道一致，但不同的是你不能向其中插入任何內容。從以基線定位的角度來說，間距就像一條很寬的基線。

嵌套網格

一個網格元素可以也成為一個網格容器。在接下來的例子中我事先有了一個 3 列的網格元素，并有兩個跨軌道的網格。在這個例子中，第一個網格元素含有幾個子級元素。當這些元素不是網格容器的直接子級元素時，它們不會參與到網格布局中，并顯示為正常的文檔流。

如下示例：

html：

<div class="wrapper">
    <div class="box box1">
        <div class="nested">a</div>
        <div class="nested">b</div>
        <div class="nested">c</div>
    </div>
    <div class="box box2">Two</div>
    <div class="box box3">Three</div>
    <div class="box box4">Four</div>
    <div class="box box5">Five</div>
</div>

css：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 1em;
  background:#000;
}
.wrapper > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.nested{
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

圖12

當我們給box1設置display: grid;如下圖顯示：

box1 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
}

圖13

圖13中box1它也會變成一個網格元素，它的子級元素也會排列在這個新網格元素中。

在這個例子中，嵌套網格和他的父級并沒有關系。就像你在例子中所看見的一樣，它并沒有從它的父級繼承 grid-gap (en-US) 屬性，并且嵌套網格里面的網格線沒有與父級的網格線對齊。

網格單元重疊

多個網格項目可以占用同一個網格單位。如下圖示例：

html：

<div class="wrapper">
   <div class="box box1">One</div>
   <div class="box box2">Two</div>
   <div class="box box3">Three</div>
   <div class="box box4">Four</div>
   <div class="box box5">Five</div>
</div>

css：

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
   column-gap: 10px;
   row-gap: 10px;
}
.box{
	background: #fff;
    border:1px solid #000;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   background:red;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   background:orange;
}

效果顯示：

圖14

網格 box2 現在覆蓋于 box1 之上，其覆蓋順序遵循文檔流的原始順序（后來居上）。

我們可以使用 z-index 屬性控制重疊的順序。如果我們給 box2 設定一個低于 box1 的 z-index 值的話，box2將會顯示在 box1 的下方。如下示例：

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
   column-gap: 10px;
   row-gap: 10px;
}
.box{
	background: #fff;
    border:1px solid #000;
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   background:red;
   z-index:2;
}
.box2 {
   grid-column-start: 1;
   grid-row-start: 2;
   grid-row-end: 4;
   background:orange;
   z-index:1;
}

顯示效果：

圖15

總結

在本文章中我們快速對網格布局的概念有了個基本的了解。后面會詳細介紹網格的布局及相關屬性的具體內容。

站開發入門指南：如何劃分網格？

除了能設定這些常見的尺寸的設定的值之外，其實還有它自己特別的一些值的設定。在開始介紹這幾個特別的值得設定之前，先來看到開發者工具顯示的網格效果。

先給大家介紹一個非常重要的信息，這個信息就是網格(中單元格)的尺寸。網格(中的單元格)的尺寸是由兩個數據組成的，一個是左邊的，一個右邊，它是通過一個點分開的。這里乍一看其實沒有什么特別奇怪的地方，因為這里前后都是一樣的，包括行高也是前后都是一樣的。

這里其實前面這個值就是在CS5里面寫的這樣的值，后面這個值其實是跟DPR相關的，也就是之前在講屏幕像素的時候提到過的高倍屏，它有一個比較高的屏幕像素密度值的東西。

這里錄制的顯示器因為它是普通倍率的屏幕，不是高倍屏的屏幕，所以前后兩個值都是一樣的。但是如果網頁在高倍屏上打開，比如這里，在高倍屏上去打開之后給大家截個圖看一下。大家可以看到這里截出來的圖，它的值前面是后面的兩倍。

這個東西大家做一個基本的了解就可以了，只要知道它是跟屏幕倍率有關，因為像主屏幕就是剛才去截的屏幕，OPR是2，所以這兩者的關系其實就是前面CS5設置的值除以DPR的值，然后就得出了后面這樣的數據了。所以如果在不同的倍率的屏幕上可能看到的效果是不一樣的，這個東西知道就好了。

像自己平時其實沒有什么大的影響，因為主要還是看CS5，這部分設置的值就可以了。

接下來是先來介紹一下rep，這個東西準確的來講其實是一個單位，因為它用起來是這樣用的1fr.2fr這樣子。這個東西的英文全稱叫做fraction，fraction是有這種部分的意思，它的作用其實就是把整個容器內剩余的空間做一個均分，然后進行分配。

所以它的使用特點跟這種Flex布局中的repeale.xegrow其實是有點像的。利用這樣的一個單位就能實現把整個的容器區域充分的利用起來，就是形成的整個網格就能剛剛好的占用滿整個容器的區域。

這里通過這個代碼來看一下，比如這里去做一個簡化，先讓它變成一行一列，這樣的結果是整個網格就這么大。然后在列這里加一個1fr，會發現這里就神出來第二列，第二列完全占據了剩下的橫向的空間。

也可以看到這樣一個格子，第二列這里形成的格子的尺寸是這樣子，左邊是在CSS里面定義的值，右邊是通過DPR相關的一些計算得出的具體的像素值。這樣在橫向空間內是不是完全占據了這樣一個容器的寬度？

大家注意，像這種網格生成的格子也可以稱為叫一個單元格，不管它的尺寸大小，只要是網格形成的其中的一個格子都可以稱作叫單元格。這里給這個行這里也加一個1fr，會發現這里出現了第二行，第二行這里也是1fr，500px，這說明第二行也是1fr設置產生的了。

1fr這里就把整個容器的縱向的高度，給充分的利用起來了。

其實看到這里也能感覺到它的用法跟flexgrow真的是很像的，就是這里1fr其實就是把剩余的空間就分成1份，這一列占據1份。假如這里來個2fr，剩余的橫向空間總共就分為3份，第三列占兩份，第二列占1份。

假如這里再來一個，比如5fr，它也是一模一樣的邏輯，就是剩余的空間進行均分，總共設置了幾個fr，比如橫向設置了列這里總共設置了8個fr，就除以8，然后占一份，占兩份，占5份。

剩余空間不一定是第一個之后的，比如這里中間也可以穿插其他的單位的設置，比如在這里再來一個200px，橫向的寬度剩余的空間是什么？就是元素的總寬度減去已經固定的這些值，不就是剩余的空間了嗎？剩余的空間再進行總的fr份數的平分，各自去占幾份，是這樣的效果。

像這里，比如這里來一個3fr，最后來一個200px，也是一樣類似的邏輯，都是這樣的劃分方式。其實也可以利用fr的方式快速的實現純行純列的布局，比如這里來這樣一個1fr、1fr、1fr三列，是不是就三個這樣的列的單元格了？

如果是行也可以這樣，1fr、1fr、1fr，其實這就是有三行了，但是如果把元素放進去，其實就能看得到了，比如放幾個元素進去111，其他就變成三行的效果了。

再更復雜一點，要做完全的平分的，比如9宮格，把列寬這樣一個設置打開，就會發現它就是一個9宮格了，再來多幾格，它是不是就變成16宮格了？所以很多時候fr這個單位，是在很多場景都會用得到的。因為用它就是能夠去把整個的容器內部的空間給利用起來。所以想實現把容器空間內部完整利用起來的效果，進行一些剩余空間的分配、平均分配這樣的一些需求，就可以大膽的去用fr這樣一個單位。

們前端開發過程中，寫css（包括sass, less, stylus這樣的預處理器）進行設計稿的樣式還原是一項重要的工作，而其中，關于頁面布局的部分，又是書寫樣式代碼時候的重點和難點，這篇文章就盡可能的去總結常見的一些頁面布局實現方案(并不是全部，布局實現方法太多了)，希望能夠對大家有所幫助。

在開始正題之前，有一點要說明：css布局中遇到的一個繞不開的問題就是瀏覽器兼容性，下面方案會遇到類似transform, flex等的兼容性問題，且由于grid布局兼容性問題，暫不涉及grid布局內容，在不同場景，大家選擇合適的布局實現方案即可。

1. 居中相關的布局

1.1 水平居中布局

效果圖如下：

方案一. inline-block + text-align

分析：display設置為inline-block的元素，具有文本元素的性質，其父元素可以通過設置文本對齊屬性text-align來控制其在行內的對齊方式，text-align: center即為水平對齊

注意：text-align屬性是具有繼承性的，會導致自己元素內部的文本也是居中顯示的，需要自身設置text-align覆蓋

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
        text-align: center;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. 定位 + transform

分析：父元素開啟定位（relative，absolute,fixed都可以）后，子元素設置絕對定位absolute后，left設置為50%，再使用transform: translateX(-50%)將子元素往反方向移動自身寬度的50%，便完成水平居中。

注意：父級元素是否脫離文檔流，不影響子元素水平居中效果，但是transform是css3屬性，存在瀏覽器兼容問題

<style>
    .wrap {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案三. display: block + margin: 0 auto

分析：這個方法只需要對子元素進行設置就可以實現水平居中，margin設置auto表示瀏覽器會自動分配，實現來外邊距等分效果。

注意：這里子元素設置display為block或者table都是可以的，如果子元素脫離文檔流（浮動，定位），會導致margin屬性的值無效。

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: table;
        margin: 0 auto;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.2 垂直居中布局

效果圖如下：

方案一. 定位 + transform

這種方案和之前水平居中布局的方案二是同樣的原理，不在贅述

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. display: table-cell + vertical-align

分析：設置display: table-cell的元素具有td元素的行為，它的子元素布局方式類似文本元素，可以在父元素使用vertical-align: middle;實現子元素的垂直居中。

注意：vertical-align屬性具有繼承性，導致父元素內文本也是垂直居中顯示的。

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.3 水平垂直居中布局

效果圖如下：

前面分別總結了一些水平居中和垂直居中的布局方式，那么進行水平垂直居中的布局，也就沒什么特別要說的了，直接上代碼：

方案一.定位 + transform

<style>
    .wrap {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. 結合水平布局方案三，垂直布局方案二

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.4 使用flex進行居中布局

分析：使用flex，水平垂直居中會變得非常容易，默認情況下，align-items: center垂直居中（交叉軸排列方式），justify-content: center水平居中（主軸排列方式）注意：需要考慮瀏覽器兼容性問題。

<style>
     .wrap {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 1200px;
         height: 800px;
         background-color: aqua;
     }
     .content {
         width: 200px;
         height: 200px;
         background-color: blueviolet;
     }
</style>
 <body>
     <div class="wrap">
         <div class="content"></div>
     </div>
 </body>

2. N列布局

2.1 兩列布局

這里的兩列布局指的是，其中一列是定寬元素，另一列元素寬度自適應。比如，我們實現左列定寬，右列自適應的布局。

效果圖如下：

方案一. 左邊元素浮動，定寬，右邊元素設置margin-left

分析：一個最簡單的做法，左邊元素設置浮動，定寬，右邊元素的margin-left設置為左邊元素寬度大小，可以實現效果。

注意：我們左邊元素使用了浮動，但是右邊元素沒有浮動

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        margin-left: 400px;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">自適應</div>
</body>

方案二. 左邊元素浮動，定寬，右邊元素設置overflow:hidden

分析：右邊元素由于設置overflow:hidden開啟BFC，與外界隔離，所以能實現效果

注意：overflow:hidden的設置也使得右邊元素內容超出隱藏。這里如果不設置overflow:hidden，右邊元素的寬度是100%，有一部分被左邊浮動元素蓋住，不是我們要的結果，雖然看起來沒什么區別。

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">自適應</div>
</body>

方案三.將左右元素用一個display:table的元素包裹，左右元素設置為display: table-cell

分析：這里主要是基于表格元素，在沒有設置寬度時，會自動分配寬度來實現布局的。

注意：設置為表格后，在某些瀏覽器可能會受到表格本身特有行為的影響，比如表格邊框等等。

<style>
    .w {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .l, .r {
        display: table-cell;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .r {
        background-color: blueviolet;
    }
</style>
<body>
    <div class="w">
        <div class="l">定寬</div>
        <div class="r">自適應</div>
    </div>
</body>

方案四. flex布局

分析：父容器采用flex布局，左邊元素定寬之后，右邊元素，因為只有一個，所以flex屬性設置為不是0的正值（也就是設置flex-grow），都會占滿剩余空間。

注意：依然是，注意兼容性問題。

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實現一個兩側寬度固定，中間寬度自適應的三列布局，區別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實現的是，左中兩列定寬，右邊一列自適應的布局，這個實際上和前面的兩列布局是類似的。

效果圖如下：<style>
     .p {
         display: flex;
         height: 600px;
     }
     .l {
        background-color: aqua;
        width: 400px;
     }
     .r {
         flex: 1;
         background-color: blueviolet;
     }
</style>
 <body>
     <div class="p">
         <div class="l">定寬</div>
         <div class="r">自適應</div>
     </div>
 </body>

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實現一個兩側寬度固定，中間寬度自適應的三列布局，區別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實現的是，左中兩列定寬，右邊一列自適應的布局，這個實際上和前面的兩列布局是類似的。

效果圖如下：

方案一. 定寬 + overflow:hidden

分析：這個方案和兩列布局方案二是相同的。

<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        width: 400px;
        background-color: blueviolet;
        float: left;
    }
    .r {
        background-color: brown;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="c">定寬</div>
    <div class="r">自適應</div>
</body>

方案二. flex布局

分析：這里布局原理和兩列布局中flex布局方式是相同的。

<style>
     .w {
         display: flex;
         height: 600px;
     }
     .l {
         width: 400px;
         background-color: aqua;
     }
     .c {
         width: 400px;
         background-color: blueviolet;
     }
     .r {
         flex: 1;
         background-color: brown;
     }
</style>
 <body>
     <div class="w">
         <div class="l">定寬</div>
         <div class="c">定寬</div>
         <div class="r">自適應</div>
     </div>
 </body>

2.2.2. 圣杯布局

兩側寬度固定，中間寬度自適應的三列布局（中間元素不需要嵌套子元素）

效果圖如下：

方案一. 左右兩側浮動，中間元素使用margin

分析：這種方法就是左右兩邊浮動，給定寬度，中間元素使用margin空出左右兩邊元素的位置，實現比較簡單。

注意：這種方式，需要在書寫html結構時，將右側元素寫在中間元素的前面，因為如果右側元素在中間元素后面，由于浮動元素位置上不能高于（或平級）前面的非浮動元素，導致右側元素會下沉。但是，中間元素一般都是頁面的核心部分，放在比較后面的位置，不利于SEO。

<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
        float: right;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">定寬</div>
    <div class="c">自適應</div>
</body>

方案二. 父容器使用margin，左中右元素均浮動，利用定位和margin移動到正確位置

分析：這種方法將中間元素c放置在最前面，有利于SEO。

注意：實現細節在參考下面代碼中的注釋。

<style>
    .w {
        /* margin-left對應左邊元素l的寬度，margin-right對應右邊元素r的寬度 */
        margin-left: 400px;
        margin-right: 400px;
    }
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        position: relative;
        /* 為了讓l元素從當前行移動到第一行同一位置*/
        margin-left: -100%;
        /* 移動到中間元素左側正確位置 */
        left: -400px;
    }
    .c {
        width: 100%;
        background-color: blueviolet;
    }
    .r {
        width: 400px;
        background-color: brown;
        position: relative;
        /* 為了讓l元素從當前行移動到上一行*/
        margin-left: -400px;
        right: -400px;
    }
</style>
<body>
    <div class="w">
        <div class="c">自適應</div>
        <div class="l">定寬</div>
        <div class="r">定寬</div>
    </div>
</body>

2.2.3. 雙飛翼布局

兩側寬度固定，中間寬度自適應的三列布局（中間元素內部增加子元素用于放置內容）

效果圖如下：

方案一. 中間元素子元素設置margin，左中右元素均設置浮動，左右元素通過margin移動到正確位置

分析：這種方法為中間元素增加子元素作為內容區域，通過子元素設置margin完成。

注意：和圣杯布局對照，有相似處，也有不同，實現的結果是一樣的。

<style>
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        /* 為了讓l元素從當前行移動到第一行同一位置*/
        margin-left: -100%;
    }
    .c {
        width: 100%;
        background-color: blue;
    }
    .i {
        height: 600px;
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
         /* 為了讓r元素移動到第一行*/
        margin-left: -400px;
    }
</style>
<body>
    <div class="c">
        <div class="i">自適應</div>
    </div>
    <div class="l">定寬</div>
    <div class="r">定寬</div>
</body>

2.2.4. flex布局實現（中間自適應，左右等寬）

分析：flex實現就很簡單了，可以參照普通三列布局flex實現。

注意：還是要注意瀏覽器兼容性問題。

<style>
    .w {
        display: flex;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .c {
        flex: 1;
        background-color: blueviolet;
    }
    .r {
        width: 400px;
        background-color: brown;
    }
</style>
<body>
    <div class="w">
        <div class="l">定寬</div>
        <div class="c">自適應</div>
        <div class="r">定寬</div>
    </div>
</body>

2.3 多列等分布局

所謂多列等分布局，就是若干列在容器中自適應等分寬度，我們以五列等分布局為例。

效果圖如下：

方案一. 浮動 + 百分數平分

分析：這種方案就是每一列浮動，之后按照百分比平分寬度，實現簡單。

<style>
   .col {
       float: left;
       width: 20%;
       height: 300px;
   }
   .col1 {
       background-color: blue;
   }
   .col2 {
       background-color: blueviolet;
   }
   .col3 {
       background-color: aqua;
   }
   .col4 {
       background-color: beige;
   }
   .col5 {
       background-color: salmon;
   }
</style>
<body>
    <div class="w">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

方案二. 使用display: table布局

分析：父容器指定display: table，設置布局行為table-layout: fixed，指定每個表格等寬。

注意：table-layout: fixed是需要設置的，默認情況下，列寬度由單元格內容設定，設置之后，列寬由表格寬度和列寬度設定。

<style>
    .w {
        display: table;
        /* 列寬由表格寬度和列寬度設定 */
        table-layout: fixed;
        width: 100%;
    }
   .col {
       display: table-cell;
       height: 300px;
   }
   .col1 {
       background-color: blue;
   }
   .col2 {
       background-color: blueviolet;
   }
   .col3 {
       background-color: aqua;
   }
   .col4 {
       background-color: beige;
   }
   .col5 {
       background-color: salmon;
   }
</style>
<body>
    <div class="w">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

方案三. 使用column布局

分析：使用column布局，指定內容區域需要分為5列即可。

注意：瀏覽器兼容性問題。

<style>
     .w {
         /* 指定列數 */
         column-count: 5;
         /* 指定列與列之間的間隙，默認1em */
         column-gap: 0;
     }
     .col {
         height: 300px;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
</style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>

方案四. 使用flex布局

分析：使用flex布局十分簡單，指定每一列所占空間相同即可

<style>
     .w {
        display: flex;
     }
     .col {
         height: 300px;
         flex: 1;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
</style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>
 </html>

2.4 多列等高布局

所謂多列等高布局，就是多類內容可能不一樣，但是保證每一列的高度是相同的，這個高度應該由內容最多的那一列決定。

效果圖如下：

方案一. 使用display: table布局

分析：父元素設置display: table，子元素設置display: table-cell，這樣布局就是按照表格行為布局，表格單元格默認等高。

 <style>
    .w {
        display: table;
    }
    .col {
        display: table-cell;
        width: 20%;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
</style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

方案二. 使用flex布局

分析：默認情況下，display: flex的元素align-items屬性值為stretch，如果項目未設置高度或設為auto，將占滿整個容器的高度。

<style>
    .w {
        display: flex;
    }
    .col {
        flex: 1;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
</style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

3. 全屏布局

所謂全屏布局，就是實現經典的頭部，內容區，底部三大區域占滿全屏的布局，這種布局很常見。

實現效果如下：

分析：這里采用的方案是，頭部底部使用fixed定位，中間使用之前講到的兩列布局技術。

注意：頭部底部可以使用header, footer標簽，內容區域結構與布局都是多種多樣的。

<style>
        html, body {
            margin: 0;
            overflow: hidden;
        }
        .header {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            height: 100px;
            background-color: salmon;
        }

        .w {
            position: fixed;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 100px;
            overflow: auto;
            background-color: palevioletred;
        }

        .w .l {
            width: 400px;
            /* height: 100%; */
            position: fixed;
            left: 0;
            top: 100px;
            bottom: 100px;
            background-color: greenyellow;
        }

        .w .r {
            position: fixed;
            left: 400px;
            right: 0;
            top: 100px;
            bottom: 100px;
            background-color: blueviolet;
        }

        .footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100px;
            background-color: goldenrod;
        }
</style>
    <body>
        <div class="header"></div>
        <div class="w">
            <div class="l"></div>
            <div class="r"></div>
        </div>
        <div class="footer"></div>
    </body>

本篇文章總結了一些常見布局的實現方案，css布局的實現方案很多，需要我們平時多去積累，選擇合適的方案。

最后，希望隨著時間的推移，兼容性不再成為我們技術實現的障礙，愿世界越來越美好。

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學習資料，只要私信：“前端"等3秒后即可獲取地址，
里面概括應用網站開發，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關視頻資料，等你來拿

在線咨詢

上一篇：2.4.1.HTML5表單提交和PHP環境搭建
下一篇：JSP 和 Servlet 有哪些相同點和不同點

您的項目需求

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

整合營銷服務商

前端入門-css Grid網格基礎知識

格布局的基本概念

什么是網格？

CSS 網格布局具有以下特點：

CSS 網格常用術語：

網格容器

網格軌道

fr單位

網格線

網格單元

網格區域

網格間距

嵌套網格

網格單元重疊

總結

1. 居中相關的布局

方案一. inline-block + text-align

方案二. 定位 + transform

方案三. display: block + margin: 0 auto

1.2 垂直居中布局

方案一. 定位 + transform

方案二. display: table-cell + vertical-align

1.3 水平垂直居中布局

1.4 使用flex進行居中布局

2. N列布局

方案一. 左邊元素浮動，定寬，右邊元素設置margin-left

方案二. 左邊元素浮動，定寬，右邊元素設置overflow:hidden

方案三.將左右元素用一個display:table的元素包裹，左右元素設置為display: table-cell

方案四. flex布局

2.2 三列布局

2.2.1. 普通三列布局

方案一. 定寬 + overflow:hidden

方案二. flex布局

2.2.2. 圣杯布局

方案一. 左右兩側浮動，中間元素使用margin

方案二. 父容器使用margin，左中右元素均浮動，利用定位和margin移動到正確位置

2.2.3. 雙飛翼布局

方案一. 中間元素子元素設置margin，左中右元素均設置浮動，左右元素通過margin移動到正確位置

2.2.4. flex布局實現（中間自適應，左右等寬）

2.3 多列等分布局

方案一. 浮動 + 百分數平分

方案二. 使用display: table布局

方案三. 使用column布局

方案四. 使用flex布局

2.4 多列等高布局

方案一. 使用display: table布局

方案二. 使用flex布局

3. 全屏布局

您的項目需求