preface

Recently, a friend of mine complained to me that she was asked how to implement layout and principles in an interview. The JavaScript part of the previous answer was very good, but it happened here that the boat went wrong, completely without ideas, the following interview state plummeted. As he had expected, he did not get in.

After I gave this friend a solution, I went home to sort out this article. I hope other people in the interview, when asked about the grail layout, can calmly answer.

This article introduces the principles of the classic layout, the Holy Grail layout, and two ways to implement it: float and Flex.

What is the Holy Grail layout?

The Grail layout is a discussion of the implementation of a “three-column liquid layout.” One of the earliest examples of a perfect implementation is Matthew Levine’s 2006 article “In Search of the Holy Grail,” which describes the best way to implement a Holy Grail on the web.

It has the following requirements:

  • The top (header) and the bottom (footer) take up all the width of the screen.
  • The section between the top and bottom (Container) is a three-column layout.
  • The three-column layout has the same width on both sides, and the middle section automatically fills the entire area.
  • The height of the middle section is the height of the highest area of the three columns.

Next, there are two ways to do this. They all end up the same, as shown below:

Implementation method 1: float

Code first:

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>
Copy the code
.header, .footer {
    border: 1px solid # 333;
    background: #ccc;
    text-align: center;
}
.footer {
    clear: both;
}

.container {
    padding:0 220px 0 200px;
    overflow: hidden;
}
.left, .middle, .right {
    position: relative;
    float: left;
    min-height: 130px;
}
.middle {
   width: 100%;
    background: blue;
}
.left {
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background: red;
}
.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}
Copy the code

Here are some ideas:

  • In HTML, define the header and footer styles so that they are horizontally padded.
  • The three columns in the Container are set to float and relative position (used later), with middle first and footer clearing the float.
  • The left and right columns of the three columns are 200px and 220px wide, with the middle part set to 100% full
  • In this way, due to floating, middle will occupy the whole container, and the left and right areas will be squeezed down
  • Next, set the leftmargin-left: -100%;Return left to the left of the previous row
  • But this will hide the middle, so set the outer containerpadding: 0 220px 0 200px;, leave space for left
  • At this time, the left is not on the left, because the relative positioning has been set before, so it passesleft: -200px;Pull left back to the far left
  • Again, for the right field, setmargin-left: -220px;Pull right back to the first row
  • There is now 220px space on the right, so finally set ‘right: -220px; ## Pull the right area to the far right.

Implementation method 2: Flex elastic box

The Holy Grail layout with an elastic box is extremely easy, just flex the middle part of the layout.

<div class="header">
    <h4>header</h4>
</div>

<div class="container">
    <div class="left">
        <h4>left</h4>
        <p>left-content</p>
    </div>
    
    <div class="middle">
        <h4>middle</h4>
        <p>middle-content</p>
    </div>
    
    <div class="right">
        <h4>right</h4>
        <p>right-content</p>
    </div>
</div>

<div class="footer">
    <h4>footer</h4>
</div>
Copy the code
.header, .footer {
    border: 1px solid # 333;
    background: #ccc;
    text-align: center;
}

.container {
    display: flex;
}
.left {
    width: 200px;
    background: red;
}
.middle {
    flex: 1;
    background: blue;
}
.right {
    width: 220px;
    background: green;
}
Copy the code

Here are some ideas:

  • Header and footer are filled horizontally as above. Footer no longer has to clear the float
  • In a Container, place the left, middle, and right in sequence. Do not place the middle in the front of the container
  • Set the elastic layout for Containersdisplay: flex;
  • The width of the left and right areas is fixed, and the middle is setflex: 1;Can be

conclusion

Overall, elastic layouts are the best way to achieve the Holy Grail layout because they are clearer and easier to understand than floating, without worrying about mobile adaptation.

The floating method, which may be encountered in an interview, mainly tests the ability to understand the layout. Therefore, it is recommended that you copy the floating example and simulate it yourself to deepen your understanding.

Update (2019-01-17)

Thanks @shen End put forward the suggestion, here is a supplement.

Another core of the Grail layout: the important content loads first. As in this article, “middle” comes first and “left” and “right” comes second.

PS: Welcome to follow my public account “Chao Ge Front-end Small stack” to exchange more ideas and technologies.