10分钟理解CSS3Grid布局
基本介绍
上⼀篇⽂章我们介绍了，今天我们再来说说css3的另外⼀个强⼤的功能：Grid。
Grid做前端的同学应该都很熟悉了，翻译成中⽂为“栅格”，⽤过bootstrap、semantic ui、ant design的同学肯定都了解grid layout（删格布局），以往css框架中的grid布局⼀般是通过float和百分⽐的宽度实现的，这种实现有⼏种缺点：html不够简洁；
需要清除浮动以避免⾼度塌陷；
列的个数是固定的，不能灵活定义。⽐如bootstrap是12列，semantic ui是16列，ant design 24列。
当然grid也可以⽤flex实现，但是并不会⽐⽤float简单多少，⽽且flex擅长的是⼀维空间的布局，⽽对grid这种⼆维空间并不擅长。现在css3从规范和标准层⾯实现了grid，编程体验⼤⼤提升！
兼容性
⽤法
Grid作为⼀个⼆维的栅格系统，由若⼲列（column）和⾏（row）构成。
1. Column
(1) 设置column
CSS3中的Grid可以划分为任意个数的列（column），⽽且每个column的宽度可以任意设置！我们先来看⼀个简单的例⼦：html:
<div id="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
css:
body{
color: #fff;
text-align: center;
}
#content{
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
max-width: 960px;
margin: 0 auto;
}
#content div{
background: lightgrey;
padding: 30px;
}
#content div:nth-child(even){
background: skyblue;
}
效果：
当我们设置了display: grid和grid-template-columns: 33.3% 33.3% 33.3%后#content就被划分成了三⾏三列的grid，此时#content被称为grid container，⽽#content的⼦元素称为grid item。
我们也可以任意改变column的个数和宽度，⽐如：
#content{
grid-template-columns: 10% 20% 30% 40%;
}
效果：
(2) fr（fraction）
css3中引⼊了⼀个新的单位fr（fraction），中⽂意思为“分数”，⽤于替代百分⽐，因为百分⽐（⼩数）存在除不尽的情况，⽤分数表⽰可以避免多位⼩数的写法。⽐如三列等宽的grid可以表⽰为：
grid-template-columns: 1fr 1fr 1fr;
(3) repeat
我们也可以⽤repeat⽅法来简化column或者row的写法，repeat⽅法接受两个参数，第⼀个参数表⽰重复的次数，第⼆个参数表⽰重复的内容。所以，三列等宽的grid我们还可以表⽰为：
grid-template-columns: repeat(3, 1fr);
当我们要定义的列数很多时，repeat就会变得⾮常有⽤，⽐如我们要定义⼀个10列等宽的grid，可以写成repeat(10, 1fr)，⽽不⽤将1fr重复书写10遍。
2. Row
(1) 设置row
当我们设置column之后，row会因为元素的换⾏⽽⾃动产⽣，但是我们依然可以设置row的个数和⾼度。
css：
#content{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 60px);
max-width: 960px;
}
效果：
可以看到，虽然第四⾏没有内容，但是row确实存在并占据了那部分空间。
(2) minmax
上⾯的例⼦中我们给了row⼀个固定⾼度，这导致⼀个问题：如果某个grid item中的内容特别多，受制于固定的⾼度，部分内容将⽆法显⽰，如下图：
为解决这个问题，css提供了minmax函数，让我们可以设置row的最⼩⾼度和最⼤⾼度，最⼤⾼度取auto后便可以让row的⾼度⾃适应：
css：
grid-auto-rows: minmax(60px, auto);
// 或者
grid-template-rows: repeat(3, minmax(60px, auto));
效果：
(3) grid gap
如果我们想给⾏和列之间加上间隔，也有现成的⽅法：
css:
grid-gap:{
10px;
}
效果：
3. Grid Line
以上所有例⼦中，grid中的每个grid item都是按默认顺序排列的。如果我们想重新布局改变grid item的位置或⼤⼩呢？为此引⼊了grid lines的概念，所谓的grid lines就是将grid若⼲等分后的分割线，如下图中横向和纵向序号1～8的线即为grid lines：
<img src=";/>
通过定义grid item的起始和结束的grid line我们就可以实现对grid item位置和覆盖⾯积的控制。⼀个简单的例⼦：
html：
<div id="content">
<div class="one">1</div>
</div>
css:
#content {
display: grid;
grid-template-columns: repeat(8, 100px);
grid-template-rows: repeat(8, 100px);
grid-gap: 10px;
}
.one {margin属性值可以为百分比
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 3;
grid-row-end: 6;
}
效果：
通过设置grid-column-start/end grid-row-start/end相当于给grid item设置起始坐标和结束坐标，上⾯的css也可以简写为：
.one {
grid-column: 3 / 6;
grid-row: 3 / 6;
}
// 或者
.one {
grid-area: 3 / 3 / 6 / 6;
}
如果grid item的起始grid line为默认，我们可以只设置它的跨度（span）:
.one{
grid-column: span 3;
grid-row: span 3;
}
4. Grid Area Template
除了通过grid lines进⾏布局，css3提供了⼀种更⽜逼的布局⽅式：grid area template。与其⽤语⾔解释什么是grid area template，不如直接看代码：
html：
<div id="content">
<header>Header</header>
<main>Main</main>
<section>Section</section>
<aside>Aside</aside>
<nav>Nav</nav>
<footer>Footer</footer>
</div>
css:
body {
color: #fff;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
max-width: 960px;
margin: 0 auto;
grid-gap: 10px;
grid-template-areas:
"header header header header"
"aside . main main"
"nav . main main"
"section section section section"
"section section section section"
"footer footer footer footer";
}
#content>* {
background: #3bbced;
padding: 30px;
}
header { grid-area: header; }
main { grid-area: main; }
section{ grid-area: section; }
aside { grid-area: aside; }
nav { grid-area: nav; }
footer { grid-area: footer; }
效果：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论