In essence, the layout of the Holy Grail and the layout of the double wings are all three column layout - the middle adaptive fixed width on both sides. In one interview, three ways of implementation were required, but only two were written. The interviewer said that the foundation was not solid enough

Holy Grail layout

Holy Grail HTML structure:

<div class='main'>
    <div class="middle">Middle</div>
    <div class="left">Sinister</div>
    <div class="right">Dexter</div>
</div>

Double wing layout

The HTML structure of the two wings is:

<div class='main'>
    <div class="middle">
        <div class="inner_middle">Middle</div>
    </div>
    <div class="left">Sinister</div>
    <div class="right">Dexter</div>
</div>

I. float+margin

<style type="text/css">
    .main{
        overflow: hidden;
        background: #eee;
    }
    .left{
        background: red;
        width: 200px;
        height: 280px;
        float: left;
    }    
    .right{
        background: blue;
        width: 200px;
        height: 290px;
        float: right;
    }
    .middle{
        background: green;
        height: 300px;
        margin-left: 200px;
        margin-right: 200px;
    }
</style>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>        
    </div>

Note: there are also people on the Internet using padding to replace margin, interested in their own to check.

II. Position

<style type="text/css">
    .main{
        position: relative;
    }
    .left{
        background: red;
        height: 300px;
        width: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }    
    .right{
        background: blue;
        height: 300px;
        width: 200px;
        position: absolute;
        right: 0;
        top: 0;
    }
    .middle{
        background: green;
        height: 300px;
        width: 100%;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="center"></div>
        <div class="middle"></div>
    </div>

Note: some people on the Internet mentioned that this method may have bug s in some cases, but they didn't have a deep understanding of it.

Three, Flex

<style type="text/css">
    .main{
        display: flex;
        align-items: center;
    }
    .left{
        background: red;
        width: 200px;
        height: 300px;
    }    
    .right{
        background: blue;
        width: 200px;
        height: 300px;
    }
    .middle{
        background: green;
        height: 300px;
        width: 100%;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="middle"></div>
        <div class="right"></div>
    </div>

Note: the lower version of the browser has compatibility problems. It is also seen that someone controls the location with order on the Internet

Four, Grid

<style type="text/css">
    .main{
        display: grid;
        height: 300px;
    }
    .left{
        background: red;
        grid-row:1;
        grid-column:1/2;
    }    
    .right{
        background: blue;
        grid-row:1;
        grid-column:4/5;
    }
    .middle{
        background: green;
        grid-row:1;
        grid-column:2/4;
    }
</style>
    <div class="main">
        <div class="left"></div>        
        <div class="middle"></div>
        <div class="right"></div>
    </div>

Note: the grid column is divided into five cells. The "grid column: 1 / 2" occupies the first and second cells, not the second. There is a big problem with the compatibility of this method. There are many articles on the Internet that have mentioned that the browser has not yet provided support. In fact, the new version of the mainstream browser has already supported it.