三栏布局一般多指左右两栏宽度固定，中间栏宽度自适应的布局。在能实现效果的情况下，尽可能的中间栏内容优先渲染。面试的时候经常被问到，总结了一下，有7种方法。
1.绝对定位布局
三栏布局——绝对定位布局
center
left
right
给三栏全部加了绝对定位，容易理解。缺点是三栏高度不统一。
2.左右浮动布局
三栏布局——左右浮动布局
left
right
center
用这种方法实现的时候遇到了问题，刚开始是把center对应的div放在中间位置的，结果左中右位置对了，但三栏始终不能显示在同一行上；最后发现是自己对float属性的理解有偏差，将center放在最后就显示正确了。这种方法的缺点是三栏高度不统一，center区域的内容要在最后渲染。
3.圣杯布局
此处忽略header和footer，只关注container。
三栏布局——圣杯布局
center
left
right
通过左浮动加相对定位实现，容易理解。缺点是三栏高度不统一，而且center是在container的padding中，宽度小的时候会出现混乱，所以最好给body设置一个最小宽度。
4.双飞翼布局
此处忽略header和footer，只关注container。
三栏布局——双飞翼布局
center
left
right
单纯的通过左浮动配合margin属性实现，比较经典的三栏布局方式。缺点是多了一层包裹center内容的代码，三栏高度不统一。
5. Flex布局
三栏布局——Flex布局
center
left
right
实际高度会根据内容自适应，三栏高度统一。Flex布局在移动端比较常见，布局灵活，兼容性也还可以，基本能满足大多数需求。
6.Grid布局
三栏布局——Grid布局
left
center
right
实际高度会根据内容自适应，三栏高度统一。唯一的缺点就是兼容性不太好。
7.table-cell布局
三栏布局——table-cell布局
left
center
right
左中右设置高度是为了使最小高度生效；实际高度根据内容自适应，三栏高度统一。缺点是中间的center区域不能优先渲染。
总结
我平时项目中使用Flex布局最多，当然具体使用哪种还得根据自己的需求和喜好而定。最后附上一张效果图。
效果图