CSS3 grid布局
前提：现在Grid布局基本主流的浏览器都支持，CSS3 Grid Layout是一个新的模块，这个模块主要定义一个二维网格布局系统，用来优化用户界面设计。在这个网格布局模块中，网格容器的所有子元素可以在一个灵活的或者固定的了布局网格中定位到任意槽中一、 简要Grid翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design应该了解grid...
前提：现在Grid布局基本主流的浏览器都支持，
CSS3 Grid Layout是一个新的模块，这个模块主要定义一个二维网格布局系统，用来优化用户界面设计。在这个网格布局模块中，网格容器的所有子元素可以在一个灵活的或者固定的了布局网格中定位到任意槽中
一、 简要
Grid翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design应该了解grid layout（栅格布局）。
以往css框架中的grid布局一般是通过float和百分比的宽度实现的，这种实现有几种缺点：
1. html不够简洁；
2. 需要清除浮动以避免高度塌陷；
3. 列的个数是固定的，不能灵活定义。比如bootstrap是12列，semantic ui是16列，ant design 24列。
二、Grid特点
1. 可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
2. 像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从布使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
3. 没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。
三、示例（1）
首先要将外层容器css定义为grid
1. grid-template-row：定义表格几行（空格分隔，“100px” 表示第一行高度100px,“80px”表示第二行高度80px）
2. grid-template-columns：定义表格几列（空格分隔，“30%” 表示第一列宽度占容器总宽度30%,“100px”表示第二列宽度100px，“40%”表示第三列宽度占容器总宽度40%）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
display: grid;
grid-template-columns:30% 100px 40%;
grid-template-rows:100px 80px;
}
.item1{
background-color: yellow;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item2{
background-color: olive;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item3{
background-color: hotpink;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item4{
background-color:teal;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item5{
background-color: chocolate;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item6{
background-color: lawngreen;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
效果如下：
四、示例（2）
首先要将外层容器css定义为grid
1. grid-column-start：指定从第几列开始
2. grid-column-end:表示从第几列结束
1和2加在一起可以简写为 grid-column:start/end ，如： grid-column:1/3
3. grid-row-start:指定从第几行开始
4.grid-row-end:表示从第几行结束
1和2加在一起可以简写为 grid-row:start/end， 如 ：grid-row:1/3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
display: grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
.item1{
/* 第一种写法：
grid-column-start: 1;
grid-column-end: 4;
* */
grid-column:1/3;
background-color: yellow;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item2{
grid-column:2/4;
grid-row:2/3;
background-color: olive;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item3{
grid-column-start:1 ;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end:3;
background-color: hotpink;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item4{
grid-column:3/4;
background-color:teal;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item5{
grid-column:1/2;
background-color: chocolate;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
.item6{
grid-column:2/4;
background-color: lawngreen;
display: flex;
font-size: 150%;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
</div>
</body>
</html>
效果如下：
五、示例（3）-更加高级的响应式
首先要将外层容器css定义为grid
1. CSS Grid 带来了一个全新的值，称为等分单位，即 fr 。它允许你将容器可用空间分成你想要的多个等分空间。
2. auto-fit （自适应）
过固定数量的列，让列随着宽度自适应 。
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(2, 100px);
}3. repeat()
设定宽度，重复几列。
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 50px);
}4. minmax()
最小数量时候的宽度（针对aoto-fit不够灵活）
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: repeat(2, 100px);
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
display: grid;
grid-template-columns:repeat(12, 1fr);
grid-template-rows; 50px 350px 50px;
grid-gap:5px;
grid-template-areas:
"h h h h h h h h h h h h"
"m m m m c c c c c c c c"
"f f f f f f f f f f f f";
}
@media screen and (max-width:500px) {
.container {
grid-template-areas:
"m m m m m m h h h h h h"
"c c c c c c c c c c c c"
"f f f f f f f f f f f f";
}
}
/**
* 以上代码的意思是：使用 grid-template-columns 属性创建一个 12 列的网格，
* 每个列都是一个单位宽度（总宽度的 1/12 ）。
* （注：其中， repeat(12, 1fr) 意思是 12 个重复的 1fr 值。
* fr 是网格容器剩余空间的等分单位。）使用 grid-template-rows 属性创建 3 行，
* 第一行高度是 50px ，第二行高度是 350px 和第三行高度是 50px。最后，
* 使用 grid-gap 属性在网格中的网格项之间添加一个间隙。**/
.header{
grid-area:h;
border-radius: 2em;
background-color: lightgreen;
color: white;
}
.menu{
grid-area:m;
border-radius: 2em;
background-color: olive;
color: white;
}
.content{
grid-area:c;
border-radius: 2em;
background-color: hotpink;
color: white;
}
.footer{
grid-area:f;
border-radius: 2em;
background-color: teal;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>
效果如下：
1. 宽屏幕的效果：
2. 窄屏幕自适应用@media自适应的效果
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)