三栏布局：圣杯、双飞翼、flex、栅格

--- 布局：圣杯、双飞翼、flex布局

• 三列布局，中间宽度自适应，两边定宽；
• 中间栏要在浏览器中优先展示渲染；
• 允许任意列的高度最高；

1、圣杯布局： 需要设置position定位

• 设置container包裹 main、left、right，设置container左右外边距，为left、right留出位置
• 设置main、left、right 左浮动，main 宽度为100%，left、right根据需求设置宽度，left、right的 margin-left 设置为 -100%、-宽度
• 设置main、left、right 的 position 为 relative，left左移它的宽度，right右移它的宽度
• ⚠️因为子元素都为浮动元素，所以此时会出现父容器塌陷，但是此时不应该使用 overflow：hidden，因为左右会被隐藏；这时候就需要使用after伪元素了！！！

2、双飞翼： 与圣杯布局的区别在于： “中间栏div内容不被遮挡”问题的思路不一样。

• 给 main 增加一个子元素 div content，main宽度为100%
• 三个都设置float：left、height、background
• 左右设置宽度，左：左外边距 -100%；右：左外边距 -宽度
• 设置 content 的 左右 margin 分别为 left、right 的宽度

自己想到的方法：中间宽度为：width: calc(100% - 200px)，此处为计算宽度，因为宽度要跟随左右侧栏宽度实现自适应

--- 栅格布局

父容器：

.container {
            display: grid;
            grid-template-rows: 100px 100px 100px; /*1fr 1fr fr，按宽高自动分配*/
            grid-template-columns: 100px 100px 100px;
         grid-template: repeat(3, 1fr) / repeat(3, 1fr); /*简单写法*/
        }