Holy Grail Layout and Double Wing Layout

effect

First of all, I need to explain: whether it is the Holy Grail layout or the double-flying wing layout, it is all to achieve one effect: the left and right fixed widths, and the middle part is adaptive. The difference between the two is that the Holy Grail layout sets padding-left and padding-right for the middle div; while the double-wing layout creates a child div inside the middle div to place the content, and uses margin-left and margin-right in the div Leave left and right width

Holy Grail Layout

The HTML structure looks like this:

 <body>
    <header>组成头部</header>
    <section class="container">
        <div class="middle">中间部分自适应</div>
        <div class="left">左边栏固定宽度</div>
        <div class="right">右边栏不顾宽度</div>
    </section>
    <footer>组成尾部</footer>
</body>

The CSS style looks like this:

 body {
     min-width: 700px;
}

header,
footer {
    background: grey;
    border: 1px solid #333;
    text-align: center;
}

.left,
.middle,
.right {
    position: relative;
    float: left;
    min-height: 130px;
}

.container {
    padding: 0 220px 0 200px;
    overflow: hidden;
}

.middle {
    width: 100%;
    background: red;
}

.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: green;
}

.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: blue
}

footer {
    clear: both;
}

The effect is this:

圣杯布局

Code description:

First give padding：0 220px 0 200px in the container, this step is to reserve positions for the fixed width on both sides
The middle element is set width: 100% , it is naturally adaptive
Set the left element position: relative, left: -200px . This is to make it a fixed position on the left. At this time, the effect is as follows
- Then use margin-left: -100% to get it back to the same height as the middle part, which is the key to the Holy Grail layout
- margin-left：-100% Indicates the distance to move the entire screen to the left
- Because the three elements are all floated, the margin-left: -100% the left container can be the same height as the middle part
Similarly, set the right element position: relative, right:-220px, margin-left: -220px
- Note that here margin-left is 220px. Why is this 220px, the same as its own width
- Note that when self margin-left is negative, it moves to the left, and when it is equal to its own height, it "upgrades" to the previous layer. When it is equal to -100%, this 100% represents the middle part width, so it is fixed on the left

Double wing layout

Some people say that "the double-flying wing layout was proposed by Yubo and started from Taobao UED". Its effect is the same as that of the Holy Grail layout, except that it compares the three-column layout to a bird. Middle and right wings. The technical key is that it also has a layer of div

The HTML structure looks like this:

 <body>
    <header>组成头部</header>
    <section class="container">
        <div class="main">
            <div class="middle">中间部分自适</div>
            <div class="left">左边栏固定宽度</div>
            <div class="right">右边栏固定宽度</div>
        </div>
    </section>
    <footer>组成尾部</footer>
</body>

The CSS structure looks like this:

 body {
      min-width: 700px;
}

header,
footer {
    background: grey;
    border: 1px solid #333;
    text-align: center;
}

.left,
.right,
.main {
    float: left;
    min-height: 130px;
}


.main {
    width: 100%;
    background: red;
}

.main-inner {
    margin: 0 220px 0 200px;
    min-height: 130px;
}

.left {
    margin-left: -100%;
    width: 200px;
    background: green;
}

.right {
    margin-left: -220px;
    width: 220px;
    background: blue
}

footer {
    clear: both;
}

The effect is the same as the Holy Grail layout and does not repeat the display. The key to its code is to build the middle part and display it first, and then complete the floating flow through margin-left

Thinking: Why take the three-column layout test?

The difficulty of the previous layout is the three-column layout, and the three-column layout can also lead to BFC. One of the functions of BFC is adaptive layout. And now flex: 1 can solve the problem of adaptive layout, so this kind of test question is rare.

Summarize

I have always been worried about such problems in the test before, because I was completely unprepared. Except for one test of fixed width on the left and adaptive on the right, I have never tested the CSS layout problem, probably because it is outdated

Two solutions for three-column layout

Holy Grail Layout
- float + margin-left + self-relative positioning
Double wing layout
- float + margin-left + middle part wraps another layer

Similarities: float, margin-left

margin-left: -100% : Left rising

margin-left: -220px : right up

Online demo:

References

This article participated in the SegmentFault Sifu essay "How to "anti-kill" the interviewer?" , you are welcome to join.

Holy Grail Layout and Double Wing Layout

effect