Recently, I came across two familiar words: the Holy Grail layout and the double swallows layout. At first glance: Wow, what is this layout, so high-end appearance, never seen before! When you understand what it means, you find it

Let’s take a look at the online explanation of these two words:

Both the Holy Grail layout and the Twin Wings layout target adaptive web layouts with three fixed left and right columns and a fixed middle bar border (think of the Holy Grail as the main body is plus two ears; Bird is a body with a pair of wings), the Holy Grail layout is a layout model concept proposed by Kevin Cornell in 2006. It was first improved and spread in China by the engineer of TAOBAO UED (legend is Yu Bo). It is also known as double flying wing layout in China, and its layout requirements are as follows:

  • Three column layout, middle width adaptive, fixed width on both sides
  • The middle bar shows the rendering first in the browser
  • Allow the highest height of any column

The demand is:

For the following DOM structure, write CSS to achieve a three-column horizontal layout, where left and right are located on the left and right sides respectively, the width of left is 200px, the width of right is 300px, and main is in the middle, the width is self-adaptive.

<div class="container"> 
    <div class="main">main</div> 
    <div class="left">left</div> 
    <div class="right">right</div> 
</div>
Copy the code

Let’s get rid of the so called layout name and definition, and expand coding directly to demand!

1 Relative Layout

.container {
    width: 100%;
    min-height: 300px;
    padding: 0 60px;
    box-sizing: border-box;
}
.container > div {
    position: relative;
    float: left;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.left {
    left: -60px;
    margin-left: -100%;
}
.right {
    right: 0;
    margin-right: -100%;
}
.main {
    width: 100%;
    height: 100%;
}
Copy the code

This method combines relative with float, and uses float to tile div, relative and margin to adjust the specific position

2 the flex layout

.container {
    width: 100%;
    min-height: 300px;
    display: flex;
}
.main {
    flex-grow: 1;
}
.left {
    order: -1;
    flex-basis: 60px;
}
.right {
    flex-basis: 60px;
}
Copy the code

Flex is easy to use, but there will be browser compatibility problems

3 Absolute Layout

.container {
    width: 100%;
    min-height: 300px;
    position: relative;
}
.container > div {
    position: absolute;
}
.left, .right {
    width: 60px;
    height: 100%;
}
.main {
    width: calc(100% - 120px);
    height: 100%;
    left: 60px;
}
.left {
    left: 0;
}
.right {
    right: 0;
}
Copy the code

Hem, there is no layout is absolute layout can not do ~

Look directly at the demand, in fact, the so-called holy grail, twin wing layout is a simple HTML layout problem, so you have to give such a SAO gas name (do programmers are very SAO gas 0.0), looking quite high-end, in fact, is a paper tiger, do not be frightened by it ~