一般现在都使用div+css布局，以前有很多人用table。
div+css布局的优点是比较方便简洁，代码比较少，制作和维护也比较容易，就是有些地方不同的浏览器兼容性不一样，可能会有不同的显示
table布局代码比较多，到后期维护起来是非常头疼的。这点我是深有体会，刚接手一个网站，
用的就是table布局，结果整个页面嵌套了一层又一层的表格，到处都是trtd，看得头都大了
初时，用div布局会感到很困难，因为浏览器的兼容性问题会让你头大的不得了。这时，你可以采用div+table的方式。也就是说在div中嵌套table表格。使兼容性更好。
使用代码可以时限自动换行。IE浏览器使用样式tablelayoutfixed，引用内容为abcdefghigklmnopqrstuvwxyz1234567890。即可实现浏览器自动换行。
CSSGrid网格布局又称为Grid网格，是一个二维的基于网格的布局系统，它的目标是完全改变我们基于网格的用户界面的布局方式。CSS一直用来布局我们的网页，但一直以来都存在这样或那样的问题。
一开始我们用表格table，然后是浮动float，再是定位postion和内嵌块inline-block，但是所有这些方法本质上都是只是hack而已，并且遗漏了很多重要的功能例如垂直居中。
Flexbox的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局实际上Flexbox和Grid能协同工作，而且配合得非常好。Grid网格布局是第一个专门为解决布局问题而创建的CSS模块，只要我们一直在制作网站，我们就一直要讨论这些问题。
在以前面对这样的效果，最好的解决方案是能过HTML的结构来做一定的处理。比如：
<div class="banner"><div class="container"></div>
</div>
比如我们的布局效果是960px的水平居中效果：
.container {width: 960px
marign-left: auto
margin-right: auto
}
.banner .container {
width: 100%
}
但这种方法虽然能解决我们布局中在某个区域中实现全屏效果。但有的时候，这种方法并不能解决问题。不过，值得庆幸的是，有另外的方案可以在限宽的容器中实现全屏效果。
.u-containProse {max-width: 40em
margin-left: auto
margin-right: auto
}
.u-release {
margin-left: calc(-50vw + 50%)
margin-right: calc(-50vw + 50%)
}
这是一个较新的方案，不过有一个缺点。虽然这个方法能在限定宽度容器中实现全屏的效果，但是在一些平台上会出现一个水平滚动条，这是让人无法接受的。除非你在body元素上设置overflow-x:hidden。
