首先，学完grid layout和flex layout突然豁然开朗，猛然觉得传统的布局三板斧“position”+“display”+“float”是真的不行，使用起来复杂。而grid和flex布局是非常之简洁的，虽然会受到兼容性的问题。
下面我就使用Grid和Flex来完成圣杯布局。

所谓圣杯布局，就是“两边固定宽度，中间自适应”。
所使用的HTML都是下面的：

<header>header</header>
<div id="container">
 <div id="mid">middle</div>
 <div id="left">left</div>
 <div id="right">right</div>
</div>
<footer>footer</footer>

具体而言，也就是要完成以下的任务：

1.header和footer占屏幕全部高度，高度固定
2.中间的container部分是一个三栏布局
3.left和right宽度固定，middle自适应填满整个区域；高度为三栏中最大的高度；

一、Grid Layout

Grid布局基本的使用我就贴一个链接：
grid布局基础（https://www.html.cn/archives/8510#prop-grid-column-row
）
这篇文章基本上将Grid布局讲的非常透彻，可以学习一下。
好了，下面是我用Grid布局完成的圣杯布局。

<style>
        *{
            padding:0;
            margin:0;
        }
        #container{
            display:grid;
            grid-template-columns: 100px auto 100px;
            height: 50px;
            background-color: lightblue;
        }
        header{
            grid-column:1/span 3;
            background-color: lightseagreen;
            height:200px ;
        }
        footer{
            grid-column:1/span 3;
            background-color: limegreen;
            height:150px;
        }
        #mid{
            background-color:lightcoral;
            grid-area:1/2/2/3;
        }
        #left{
            background-color: lightskyblue;
            grid-area: 1/1/2/2;
        }
        #right{
            background-color: lightpink;
            grid-area:1/3/2/4;
        }
    </style>

使用Grid布局的难点就在于放置位置，按照先行渲染middle，那么在布局的时候，如何将middle置于中间，这里我采用的是grid的属性grid-area来设置每个div的位置。

这个在掌握基本的grid布局后会非常简单。

二、Flex Layout

弹性布局是接触比较多的，作为一个一维布局，使用起来还是比较方便的，不过与grid布局不同的地方在与，flex有一个order属性值，来对flex容器里的items进行一个排序，这样的话，那么排序的问题就变得异常轻松。但是，问题就在于如何使middle这个item能够自适应。

在flex中提供一个flex-grow的属性，用来对容器剩余空间进行分摊。

所以我就想到，对于right和left设置flex-grow为0，对于middle任意设置一个值就行。这样就可以保证设置right和left后，容器中剩余的空间全部都给到middle。

这样就算完成了中间自适应。
下面是我的代码，HTML都是最初的给的那个。

<style>
        *{
            margin: 0;
            padding:0;
        }
        header{
            background-color: limegreen;
            height:100px;
        }
        #container{
            display: flex;
            width: 100%;
            height:100px;
        }
        footer{
            background-color: lightcoral;
            height:100px;
        }
        #mid{
            order:2;
            background-color: lightpink;
            flex-grow: 1;
        }
        #left{
            order:1;
            background-color:lightcyan;
            width:100px;
            flex-grow:0;
        }
        #right{
            order:3;
            background-color: lightgreen;
            width:100px;
            flex-grow: 0;
        }
    </style>

写完不易，点个赞再走，ball ball了。