用過bookstrap同學(xué)應(yīng)該知道,下圖中的布局如果用bootstrap那么我們需要為他分別指定刪格

bootstrap:

<div class="row">
  <div class="col-xs-12 header">
    HEADER
  </div>
</div>
<div class="row">
  <div class="col-xs-4 menu">
    MENU
  </div>
  <div class="col-xs-8 content">
    CONTENT
  </div>
</div>
<div class="row">
  <div class="col-xs-12 footer">
    FOOTER
  </div>
</div>

但是如果換成使用grid布局，相同效果我們只需要做如下操作：
html:

<div class="wrapper">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>

css:

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 40px 100px 40px;
}
.header {
  grid-column: span 12;
}
.menu {
  grid-column: span 4;
}
.content {
  grid-column: span 8;
}
.footer {
  grid-column: span 12;
}

咦，是不是代碼簡化了很多遗遵，而且很清晰拓提，那么就讓我們來學(xué)習(xí)一波吧

首先

Gird是css中最強大的布局系統(tǒng)慎菲，應(yīng)用于二維布局迟郎，可以同時處理行和列齿坷，可以通過將網(wǎng)格css規(guī)則應(yīng)用于父元素（網(wǎng)格容器）和該元素的子元素（網(wǎng)格子項）來使用網(wǎng)格布局辫狼。定義一個grid布局很簡單

display

.container {
  display: grid | inline-grid;
}

定義一個grid容器,為內(nèi)容創(chuàng)建了一個新的grid環(huán)境

基本知識

這些基礎(chǔ)知識是必須要掌握的初斑，有了他們學(xué)習(xí)grid布局就不怕啦

1.網(wǎng)格容器(Grid Container): 元素使用了display: grid | inlie-grid; 是所有網(wǎng)格元素的直接父級
2.網(wǎng)格子項(Grid Item): 容器的直接子元素
3.網(wǎng)格線(Grid Line): 網(wǎng)格結(jié)構(gòu)線。它們可以是垂直的（列網(wǎng)格線）或者水平的（行網(wǎng)格線）膨处，也可以在行或列的任一邊见秤。如下綠色的線為一個列網(wǎng)格線

掌握了這些基礎(chǔ)知識方便了我們對容器屬性解恰，和容器元素屬性的理解锋八，所有的屬性都是基于這些來設(shè)置的。下面我們來分別看下網(wǎng)格容器的屬性护盈，和網(wǎng)格元素的屬性

網(wǎng)格容器屬性

grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow

哇好多挟纱，是不是有點不想看了，不要急腐宋，下面我們來分下類哦

網(wǎng)格的行數(shù)列數(shù)紊服，和內(nèi)容所占區(qū)域
grid-template-columns
grid-template-rows
grid-template-areas
grid-template

網(wǎng)格線
grid-column-gap
grid-row-gap
grid-gap

網(wǎng)格元素的對齊方式
justify-items
align-items
place-items

網(wǎng)格容器的對齊方式
justify-content
align-content
place-content

網(wǎng)格軌跡
grid-auto-columns
grid-auto-rows
grid-auto-flow

分成五部分是不更清晰了
屬性使用方法
我們在來看下網(wǎng)格子項的屬性

網(wǎng)格子項屬性

首先要知道檀轨，當(dāng)設(shè)置 gird 布局之后，float围苫，display: inline-block裤园，display: table-cell，vertical-align和column-*屬性對網(wǎng)格元素沒有影響
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area

同樣我們也會把屬性分類剂府，相比容器屬性拧揽，有一些區(qū)別，
1.關(guān)于行數(shù)列數(shù)和區(qū)域的屬性名缺少了template, areas的復(fù)數(shù)變單數(shù)area
2.對齊屬性中items變成了self
3.缺少了對容器外部的對齊方式

所以只需要分為兩類

網(wǎng)格的行數(shù)列數(shù)腺占，和內(nèi)容所占區(qū)域
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area

對齊方式
justify-self
align-self
place-self
屬性使用方法

現(xiàn)在grid布局相關(guān)屬性你都知道嘞淤袜，那么它的兼容性如何呢

瀏覽器兼容性

Desktop

Mobile/Tablet

多說一句

為什么學(xué)習(xí)grid布局呢

• 讓創(chuàng)建二維布局變得更簡單
• 簡單的標(biāo)記
• 靈活性
• 跳過框架
• 瀏覽器支持

所以行動起來把小伙伴們

再多說一句

涂鴉智能------前端招聘-----了解下