CSS Grid 布局之左中右三栏布局案例
2017-05-24 本文已影响151人
圆梦人生
来源：http://itssh.cn/post/942.html
关于grid介绍参考：http://sm0210.cn/post/940.html
使用CSS Grid 实现左中右三栏布局案例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>CSS Grid 布局之左中右三栏布局案例</title>
<!--
@author:SM
@email:sm0210@qq.com
@desc:CSS Grid 布局之左中右三栏布局案例
-->
<!-- 自定义css -->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*
*/
.box,
.content {
display: grid;
}
/*
*/
.box {
grid-template-rows: 1fr;
grid-row-gap: 10px;
color: #fff;
}
.header {
height: 100px;
}
/*
*/
.content {
height: 400px;
grid-template-columns: 120px 1fr 120px;
grid-column-gap: 10px;
}
.footer {
height: 80px;
}
/*
*/
.header,
.content *,
.footer {
background-color: #7AB8ED;
}
</style>
</head>
<body>
<!-- css grid布局 -->
<div class="box">
<div class="header">header</div>
<div class="content">
<div>nav</div>
<div>article</div>
<div>aside</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
效果：
image.png
