快速开始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教程