Interview questions: The difference between the Holy Grail layout and the double-wing layout

Preface

Today I will share with you a holy grail layout and a double-wing layout and the difference between them. These two three-line layouts have always been high-frequency test points for front-end interviews in some large companies. Let me take you into the interview questions of large companies. Without further ado, let's go~

Layout Effect

The two three-row layouts have the same effect, and the effects are shown in the figure above. Their characteristics are:

• The height of the header and footer is the width of the entire browser.
• There is a three-row layout in the middle, and the width of left and right is fixed.
• The width of the middle content is adaptive to fill the middle position, and the height is the maximum height of the three columns. In fact, the processing of the Holy Grail layout and the double-wing layout is the same, but there are some minor differences in the processing in the middle.

Preliminary processing

• To avoid problems, we first set a min-width: 600px for the body;
• Then set the width of the header and footer to 100% (the entire browser page) and add a background color to make it easier to distinguish.
• In content, we add float:left effect to left, right, and midlle, and set the width and height of left and right.
• The width of the middle is set to 100%, and the height is the same as the left and right heights. Also, to make it easier to see the effect, we also give them a background color.
• There is one thing we need to note here. We should also set a height for the content. We added the float:left attribute to the div in the content, so they are all out of the text flow, resulting in a height collapse.
  

(ps: I added overflow: hidden in the content to form a BFC area to solve this problem. Interested friends can learn about it by themselves. Of course, if you don’t do this, just set the height of the content.)

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}
#middle,#left,#right
    float: left;
}
#content{
    overflow: hidden;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{
    width: 100%;
    height: 200px;
    background: yellowgreen; 
}

We found that the current page looks like this, so what’s going on?

The answer is simple. Left, right, and middle should be in a straight line, but the width of the content is not enough, so the left and right boxes are squeezed down.

Now let's take a look at these two layouts and how to solve this problem:

Holy Grail Layout

We first set a padding for the content: 0 200px, leaving 200px width on each side.
Next, we just need to place the two boxes, left and right, in the two areas.
Finally, set the margin properties for left and right respectively to adjust the position.

#content{
    overflow: hidden;
    padding: 0 200px;
}
#left{
    margin-left:-100% ;

} 
#right{
    margin-left: -200px;

Let’s look at the effect again

Ding ding ding, it’s time to witness the miracle~

Double wing layout

Then let’s see how the double flying wing layout solves this problem. Come and look down

The double-wing layout adds a middle-inner box under the middle and puts the content of the middle in this box (what is the use of this? Don’t worry, let’s read on).
Just like in the Holy Grail layout, we also set margin values ​​for float and left to adjust the position.
However, this layout does not require positioning for left and right.

#left{
    float: left;
    margin-left: -100%;
}
#right{
    float: left;
    margin-left: -200px;
}
.middle-inner{
    padding: 0 200px;
}

At this time, we find that the content in middle is gone. At this time, the midlle-inner box we added in midlle before comes in handy. At this time, we only need to set a margin of 0 200px for this box, so our content will be displayed in the middle.

.middle-inner{
    margin: 0 200px;
}

See the effect

Just as we expected, the interview questions at big companies are just like this, so let’s call it a day! ! ! !

To sum up

Finally, let's summarize. The essence of the Double Wing Layout is actually the same as that of the Holy Grail Layout. Both of them achieve the arrangement of elements by setting negative margins.

• The difference is the HTML structure. The double-wing layout sets a mildle-inner inside the middle element and sets its left and right margins, rather than the padding of the holy grail layout, to eliminate the overlap of the elements on both sides.
• The double-wing layout can have an additional HTML structure, but there is no need to set the positioning of the left and right elements.

Here is the complete code:

Holy Grail Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
            <div id="middle">
                middle
            </div>
            <div id="left">left</div>         
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}
#middle,#left,#right
    float: left;
}
#content{
    overflow: hidden;
    padding: 0 200px;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#middle{
    width: 100%;
    height: 200px;
    background: yellowgreen; 
}
 #left{
    margin-left:-100% ;
    position: relative;
    left:-200px;
} 
#right{
    margin-left: -200px;
    position: relative;
    left:200px; 
}

Double wing layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrap">
        <div id="header">header</div>
        <div id="content">
            <div id="middle">
                <div class="middle-inner">
                    middle
                </div>
            </div>
            <div id="left">left</div>         
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
.wrap{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background:grey;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: green;
}

#middle{
    background: pink;
    width: 100%;
    float: left;
    height:200px;
}
#content{
    overflow: hidden;
}
#left{
    float: left;
    margin-left: -100%;
}
#right{
    float: left;
    margin-left: -200px;
}
.middle-inner{
    margin: 0 200px;
}

This concludes the article about the must-ask interview question: the difference between the Holy Grail layout and the double flying wing layout. For more information on the difference between the Holy Grail layout and the double flying wing layout, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!