这篇文章主要介绍css中的栅格布局是什么，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
目前创新互联已为1000+的企业提供了网站建设、域名、网页空间、网站托管、企业网站设计、芦溪网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
栅格布局能将网页分成简单属性的行和列，CSS页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
圣杯布局
圣杯布局是一种三列布局，两边定宽，中间自适应：
css：
* {
box-sizing: border-box;
}
html, body{
width: 100%;
height: 100%;
margin: 0;
}
.container{
width:100%;
}
.container:after{
display: table;
content:".";
clear:both;
}
.container .cl{
float:left;
border: 1px solid red;
height: 200px;
}
.main{
width:100%;
padding 0 290px 0 320px;
background-color: blue;
}
.sub{
width: 320px;
margin-left:-100%;
background-color: white;
}
.extra{
width: 290px;
margin-left:-290px;
background-color: yellow;
}
CSSHTML：
