快速開始grid佈局

時間  2019-11-30
標籤 快速 開始 grid 佈局 简体版
原文   原文鏈接

Grid佈局概念

CSS Gird已經被W3C歸入到css3的一個佈局模塊中，被稱爲CSS Grid Layout Module，通常習慣稱爲網格佈局。css

網格佈局能夠將應用程序分割成不一樣的空間，定義它們的大小、位置和層級。html

簡單來講，網格佈局就像表格同樣可讓元素按列和行對齊排列，不一樣的是，網格佈局沒有內容結構，好比一個網格佈局的子元素能夠定位本身的位置，能夠是實現相似定位的效果。css3

兼容性

兼容性

能夠看到幾大瀏覽器都已經支持了Grid佈局，接下來咱們來一步步的來玩轉Grid佈局瀏覽器

grid vs flex

咱們知道flex和grid都是css3新的佈局方式，若是瀏覽器都支持兩種佈局，你會選擇那種呢？當咱們瞭解二者之後就能作出正確的選擇了。bash

flex佈局是一維佈局，grid佈局是二維佈局。佈局

網格容器和網格項

咱們知道給一個元素設置了display:flex就指定了flex彈性佈局，實現grid佈局同樣簡單，給元素設置display:grid就能夠了。flex

<style>
	.container{
		display: grid;
	}
</style>
<div class="container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>
複製代碼

container 就是一個網格容器，裏面的item就是網格項spa

網格術語

網格線 grid lines

網格線組成了網格，是網格水平和垂直的分界線。3d

網格線

網格軌道 grid track

就是兩條網格線之間的空間，能夠理解成表格裏面的行或者列，網格里面爲grid-row和grid-column，網格軌道能夠設置大小，來控制高度或者寬度。code

網格軌道

上圖grid-column2和grid-column3之間的區域就是一個網格軌道

網格單元格 grid cell

就是四條網格線之間的空間，是最小的單位。

網格單元格

網格區域

也是四條網格線組成的空間，可能包含一個或者多個單元格。

網格區域

實現一個grid佈局

瞭解網格個相關概念，接下來咱們來建立一個簡單的grid佈局。

上面咱們說網格軌道的時候說了能夠給網格軌道設置大小，能夠控制高度或者寬度。

html

<div class="grid">
        <div class="item-1">1</div>
        <div class="item-2">2</div>
        <div class="item-3">3</div>
        <div class="item-4">4</div>
        <div class="item-5">5</div>
        <div class="item-6">6</div>
</div>
複製代碼

css

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 300px 200px 150px;
    grid-template-rows: 150px 100px;
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
}
複製代碼

咱們來分析下上面的css

一、給grid元素設置了 display: grid來聲明使用grid佈局 二、使用grid-template-columns來設置列寬，分別爲 300px 200px 150px 三、使用grid-template-rows來設置行高，分別爲150px 100px

以上代碼咱們是實現了一個兩行三列的grid佈局，此時瀏覽器顯示以下

image.png

咱們能夠看到網格線的樣子

進階

fr

grid-template-columns和grid-template-rows不僅是能夠設置具體的數值，還能夠設置百分比、rem一類的，還能夠設置一個新單位 fr， 它是來幹什麼的呢？咱們先看

咱們先把上面demo裏面的css文件改下

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(2,1fr);
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
}
複製代碼

fr

以上實現了彈性佈局，fr用來實現彈性佈局, 咱們這裏使用裏repeat(2, 1fr),表示重複兩次，都是1fr

grid-gap

grid-gap用來這是網格項間隙

css修改以下

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(2,1fr);
    grid-gap: 40px;
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
}
複製代碼

展現以下

grid-gap

網格佈局屬性 grid-placement-properties

恭喜你，從一開始一步步的實現了一個網格佈局，能夠發現全部的樣式都寫在網格容器裏面的，當咱們實現一些複雜佈局的時候，就顯得有點力不從心了，接下來咱們來介紹下寫在網格項中的屬性。

網格佈局屬性主要用來放置容器內的網格項目，就是單一項目的位置。網格佈局屬性主要有如下四個屬性：

一、grid-column-start  設置垂直方向的開始位置網格線
 二、grid-column-end    設置垂直方向的結束位置網格線
 三、grid-row-start     設置水平方向的開始位置網格線
 四、grid-row-end       設置水平方向的結束位置網格線
複製代碼

以上的簡寫方式

一、grid-column: grid-column-start / grid-column-end
 二、grid-row: grid-row-start / grid-row-end
複製代碼

終極簡寫

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-colun-end
複製代碼

是否是有點蒙，咱們能夠大概看下，先來看deme

仍是熟悉的html佈局

<div class="grid">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
    <div class="item-4">4</div>
    <div class="item-5">5</div>
    <div class="item-6">6</div>
</div>
複製代碼

css

$bgcloors: #b03532 #33a8a5 #30997a #6a478f #da6f2b #3d8bb1;
.grid{
    display: grid;
    grid-template-columns: 300px 200px 150px;
    grid-template-rows: 150px 100px;
    div{
        color: #fff;
        font-size: 30px;
        padding: 20px;
    }
    @for $i from 1 through length($bgcloors){
        .item-#{$i}{
            background: nth($bgcloors, $i)
        }
    }
    .item-2{  // 看這裏看這裏
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }
    .item-6{   // 你要先看上面再看這裏
        grid-area: 3 / 1 / 4 / 4;
    }
}
複製代碼

先來看看咱們的成果

grid

顯示網格線的圖片

網格線

參考上圖，咱們來分析下css 一、grid元素聲明grid佈局，grid-template-columns和grid-template-rows來建立一個兩行三列的網格，可是渲染的結果倒是三行三列，爲何？咱們先接着往下分析 二、css文件中單獨設置item-2網格項的位置， grid-column-start:2 垂直線開始位置爲2 grid-column-end:4垂直線結束位置爲4 grid-row-start:1 水平線開始位置爲1 grid-row-end:2 水平線結束位置爲2 三、經過單獨設置item-2的位置，把自己要在第一行的item-3給擠下來了，而後 三、四、5按照300 200 150 排列 四、這時候兩件三列排列完了，可是還有個元素，此時剩下的元素就會獨自佔一行的位置，它的大小同樣會按照網格容器定義的行高列寬來渲染 五、最後咱們給item-6來設置了終極簡寫方式， 終極簡寫：行開始 / 列開始 / 行結束 / 列結束，而後咱們把位置對應上 grid-area:3 / 1 / 4 / 4

經過設置網格項樣式屬性，咱們能夠就實現不少複雜的佈局結構了。

幾種佈局

最後咱們結合上面所學到的實現幾個常見佈局

一、左右固定，中間自適應

設置網格容器的 grid-template-columns: 100px 1fr 100px或者grid-template-columns: 100px auto 100px就能夠實現，再簡單不過了

html

<div class="container">
	<div class="left">left</div>
	<div class="middle">middle</div>
	<div class="right">right</div>
</div>
複製代碼

css

.container{
	display: grid;
	grid-template-columns: 100px 1fr 100px;
	height: 200px;
}
.container div{
	text-align: center;
}
.left{
	background: greenyellow;
}
.middle{
	background: lightblue;
}
.right{
	background: greenyellow;
}
複製代碼

中間自適應，兩側固定

二、九宮格 使用grid-gap設置網格項間距 使用fr來平分

html

<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>
複製代碼

css

.container{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	height: 400px;
	width: 400px;
	grid-gap: 8px;
}
.item{
	background: lightskyblue;
}
複製代碼

顯示以下

九宮格

三、聖盃、雙飛翼 使用grid-area設置header元素和footer元素位置，結合grid-template-columns和grid-template-rows實現佈局 html

<div class="container">
	<div class="header">header</div>
	<div class="left">left</div>
	<div class="body">body</div>
	<div class="right">right</div>
	<div class="footer">footer</div>
</div>
複製代碼

css

.container{
	display: grid;
	grid-template-columns: 100px 1fr 100px;
	grid-template-rows: 50px 300px 50px;
}
.header{
	grid-area: 1 / 1 / 2 / 4;
}
.footer{
	grid-area: 3 / 1 / 4 / 4;
}
.header{
	background: lightsalmon;
}
.left{
	background: lightseagreen;
}
.body{
	background: lightslategray;
}
.right{
	background: lightyellow;
}
.footer{
	background: yellowgreen;
}
複製代碼

複雜佈局
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程