CSS Grid 布局之左右两栏布局案例
2017-05-24 本文已影响70人
圆梦人生
来源：http://itssh.cn/post/941.html
关于grid介绍参考：http://itssh.cn/post/940.html
使用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,
.contentInfo,
.box_left,
.copyright {
display: grid;
}
/*
box
*/
.box {
grid-row-gap: 10px;
color: #fff;
}
/*
*/
.contentInfo,
.copyright {
grid-template-columns: 200px 1fr;
grid-column-gap: 10px;
grid-template-rows: 400px;
}
/*
*/
.copyright {
grid-template-rows: 60px;
}
/*
*/
.box_left {
grid-template-rows: 40px 1fr;
grid-row-gap: 10px;
}
/*
*/
.title,
.stats,
.box_right,
.score,
.controls {
background-color: #7AB8ED;
}
</style>
</head>
<body>
<!-- css grid布局 -->
<div class="box">
<div class="contentInfo">
<div class="box_left">
<div class="title">Title</div>
<div class="stats">Stats</div>
</div>
<div class="box_right">Content</div>
</div>
<!-- -->
<div class="copyright">
<div class="score">
Score
</div>
<div class="controls">Controls</div>
</div>
</div>
</body>
</html>
效果
image.png
