The adaptive three-column layout is one of the common layouts, which is generally implemented as fixed width on both sides and adaptive in the middle

1. Implement with Float

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
    <! -- Center must come last -->
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
</div>
Copy the code
.wrap {
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}
.left {
    background-color: lightskyblue;
    /* float + margin*/
    float: left;
    margin-right: 20px;
}
.right {
    background-color: deepskyblue;
    /* float + margin*/
    float: right;
    margin-left: 20px;
}
.center {
    background-color: skyblue;
    /* BFC */
    overflow: hidden;
    zoom: 1; /* compatible with IE6 */
}
Copy the code

2. Using Flex

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>
Copy the code
.wrap {
    /* flex container */
    display: flex;
}
.left {
    background-color: lightskyblue;
    /* flex item */
    flex-grow: 0;
    /* margin */
    margin-right: 20px;
}
.center {
    background-color: skyblue;
    /* flex item */
    flex-grow: 1;
}
.right {
    background-color: deepskyblue;
    /* flex item */
    flex-grow: 0;
    /* margin */
    margin-left: 20px;
}
Copy the code

3, through the Grid

<div class="wrap">
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>
Copy the code
.wrap {
    /* grid container */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-column-gap: 20px;
}
.left {
    background-color: lightskyblue;
}
.center {
    background-color: skyblue;
}
.right {
    background-color: deepskyblue;
}
Copy the code

Grail layout and Twin wings layout

Both the Grail layout and the wing layout are typical adaptive three-column layouts, and they require that the middle column be rendered first in the DOM structure

(1) Layout of the Holy Grail

<div class="wrapper">
    <! -- Center must come first -->
    <div class="center">
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
    </div>
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>
Copy the code
* {
    margin: 0;
    padding: 0;
}
.wrapper {
    /* 4, set the inner margin for the container, for the left and right columns */
    padding-left: 220px;
    padding-right: 220px; 
}
.center {
    background-color: skyblue;
    /* set the left float for all three columns at the same time
    float: left;
    /* 2, set the width of the middle column to be adaptive, so that the left and right columns are squeezed into the next line */
    width: 100%;
}
.left {
    width: 200px;
    background-color: lightskyblue;
    /* set the left float for all three columns at the same time
    float: left;
    /* 3, set the left and right columns to a negative margin so that they return to the same line */
    margin-left: -100%;
    /* 5, set the relative positioning of the left and right columns, so that it moves to the left and right sides */
    position: relative;
    left: -220px;
}
.right {
    width: 200px;
    background-color: deepskyblue;
    /* set the left float for all three columns at the same time
    float: left;
    /* 3, set the left and right columns to a negative margin so that they return to the same line */
    margin-left: -200px;
    /* 5, set the relative positioning of the left and right columns, so that it moves to the left and right sides */
    position: relative;
    right: -220px;
}
Copy the code

(2) Double flying wing layout

<div class="wrapper">
    <! -- Center must come first -->
    <! -- Center multiple wrapper layers -->
    <div class="center-wrapper">
        <div class="center">
            <p>Say Hello To Tomorrow</p>
            <p>Say Goodbye To Yesterday</p>
        </div>
    </div>
    <div class="left">
        <p>Hello World</p>
    </div>
    <div class="right">
        <p>Thank You</p>
    </div>
</div>
Copy the code
* {
    margin: 0;
    padding: 0;
}
.center {
    background-color: skyblue;
    /* 4, set the margin for the middle column itself, reserve space for the left and right columns */
    margin-left: 220px;
    margin-right: 220px;
}
.center-wrapper {
    /* set the left float for all three columns at the same time
    float: left;
    /* 2, set the width of the middle column to be adaptive, so that the left and right columns are squeezed into the next line */
    width: 100%;
}
.left {
    width: 200px;
    background-color: lightskyblue;
    /* set the left float for all three columns at the same time
    float: left;
    /* 3, set the left and right columns to a negative margin so that they return to the same line */
    margin-left: -100%;
}
.right {
    width: 200px;
    background-color: deepskyblue;
    /* set the left float for all three columns at the same time
    float: left;
    /* 3, set the left and right columns to a negative margin so that they return to the same line */
    margin-left: -200px;
}
Copy the code