分栏属于CSS布局中的一种，现将常见的分栏方式拆出来单独整理供自己和别人参考
1、圣杯布局与双飞翼布局
圣杯布局和双飞翼布局都是实现三栏布局的方法，左右定宽，中间自适应，是很古老的布局方式，但是还是常见的他们存在的影子。提出的原因是由于硬件不足，首先渲染（main）主体部分，其次渲染（left/right）两边区域，合理利用资源。
圣杯布局：
所谓圣杯布局，通俗来讲就是布局之后的三栏像一个圣杯结构，中间是圣杯主体，两边是把手。
圣杯布局原理：
（1）html结构中首先是渲染main主体部分，然后在渲染left/right部分，这也是圣杯布局和双飞翼布局提出的主要内容，代码段如下：
<body>
<div class="content clearfix">
<div class="middle">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
（2）设置父级元素的宽高边距等,为三个子元素设置浮动和相对定位；
.content{
display: block;
box-sizing: border-box;
margin: 0 auto;
width:400px;
height:400px;
background: green;
padding: 0 100px;
}
.middle,
.left,
.right {
float: left;
overflow: hidden;
position: relative;
height: 400px;
text-align: center;
}
（3）首先将main部分占据整行，就是width设置为100%；现在就要将left/right放到指定位置；核心操作是对margin-left赋予负值。设置left其margin-left:-100%;将此部分上移一行，此时，并且用相对定位将其固定在父级元素的padding-left区域中；同样对于right来说，设置margin-left:-100px;即可左移100像素进入到main后面，然后用相对定位定位到padding-right中。代码如下：
.middle {
width: 100%;
background: red;
}
.left {
margin-left: -100%;
width: 100px;
background: blue;
left: -100px;
}
.right {
margin-left: -100px;
width: 100px;
background: yellow;
right: -100px;
height: 400px;
}
.clearfix:after {
display: block;
content: " ";
clear: both;
}
此时，圣杯布局已完成，结果如下图
双飞翼布局
双飞翼布局与圣杯布局不一样的是：圣杯布局通过父元素的padding值给left/right留出空间，通过定位将其放到留的空间内；而双飞翼模型与此不同的是，通过为main主体嵌入一个子元素设置margin: 0 100px;来给left/right留出空间，其余与圣杯布局一致。效果与上图是一致的。
我的理解
通过设置float和设置父元素宽度100%后，left/right应该在都与main在一排，但是由于宽度不够，无奈被挤下来了，但是现在我只要给margin-right一个负值（这个值大小要超过自身的宽度）他就会上去，继续被接纳，但是这样呢会覆盖main元素，所以需要留出空间，而留空间方式有两种，所以产生了这两种布局。
这两种方式，先渲染main主体部分，优化了前端性能，但是由于硬件的发展，我认为这种方式提升性能已经不明显了，还不如直接写呢，或者flex布局等。
2、flex三栏布局
flex布局就是弹性布局，它是一种自适应布局方式，根据屏幕尺寸自适应空间，闲话不说，扯代码
.content {
display: flex;
line-height: 600px;
}
.left {
width: 200px;
height: 600px;
background-color: lime;
order: 0;
}
.middle{
order: 1;
width: 100%;
background-color: purple;
}
.right {
width: 200px;
height: 600px;
background-color: blue;
order: 2;
}
flex三栏布局总体思想是为left/right设置固宽，然后让main区域充满其余宽度区间。上面代码首先将父元素空间设置为flex；然后为left/right设置宽度，然后为main元素width:100%;这样便定义了三栏布局。这个order属性意为在主轴方向的排列中显示的优先级，值越小，优先级越高，所以可以达到HTML结构中content最先渲染，却又能让其在中间部分显示的效果。
3、两栏布局
两栏布局是最为常见的，说一下我在实习时怎么进行双栏和多栏布局的，需求是PC端主页面是固宽，left/和right是左右的，一大一小。在双栏布局时，刚开始我用left区域浮动+right区域定位的方式，这样有可能出现高度坍塌的局面。后来通过给左边的div设置左浮动，然后right区域的div元素通过margin-left往右移动。两栏布局的方式很多，可自行查阅资料
4、CSS3分栏
CSS3提供一种非常方便的分栏方式。有很多属性可以用，不一定三栏，我在渲染课程数据时，用了这个渲染出来类似九宫格，很方便。
.content {
width: 400px;
column-count: 3; /*栏数*/
column-gap: 24px; /*栏间距*/
column-rule: solid 0px gainsboro; /* 定义列边框*/
-moz-column-count: 3;
-moz-column-gap: 24px;
-moz-column-rule: solid 0px gainsboro;
-webkit-column-count: 3;
-webkit-column-gap: 24px;
-webkit-column-rule: solid 0px gainsboro;
}
.left {
background-color: lime;
height: 100px;
}
.middle {
background-color: purple;
height: 100px;
}
.right {
background-color: blue;
height: 100px;
}
5、多栏布局
说一下需求页面情况：
这是我实习做的项目部分，不规则三栏布局，这个项目是用Vue做的，数据是Axios获取的。 说一下我的思路，就不贴代码了。
（1）首先通过
v-for渲染数据，然后通过判断表达式为子元素设置类选择器class="index === 0 ? 'big-item':'lit-item lit-item'+index" 用过Vue的知道index是什么。图片用<el-image>饿了么UI渲染。（2）这五个元素有一个父元素，给他相对定位，占满所在区域宽度，overflow: hidden;等等；
（3）大小图标用绝对定位，父相对子绝对的方式改变默认的定位left/right：0的位置，到此布局结束。 可设置细节行样式如宽高、鼠标触碰动画等等。写这个布局不要一个一个的写5次布局，代码冗余，一样的样式写一次就够了。当然也可以float+margin+overflow达到视觉的分列，这个是硬凑，感觉不好就没用。就到这吧，嘿嘿
