The login
registered
Write an article
Home page
Download the APP

Understanding and thinking of the Grail layout and the twin wing layout

Little peach herding sheep

Understanding and thinking of the Grail layout and the twin wing layout

The holy cup layout and the twin wing layout are important layout methods that front-end engineers need to master daily. Both have the same function, in order to achieve a three-column layout with fixed width on both sides and adaptive width in the middle.


Grail layout and twin wing layout

The Holy Grail layout comes from the article In Search of the Holy Grail, while the twin wings layout comes from Taobao UED. Although the two implementations are slightly different, they both follow the following key points:

  • Fixed width on both sides, adaptive width in the middle
  • The middle section takes precedence in the DOM structure so it can be rendered first
  • Allow any of the three columns to be the highest column
  • Just use an extra one<div>The label

Below I will introduce the grail layout and the implementation of the twin wing layout in turn, and in the end according to personal thinking to make some modifications to the original method, give some other feasible solutions.

The holy grail layout

1. The DOM structure

<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div>  <div id="right" class="column"></div> </div> <div id="footer"></div>Copy the code

First, define the DOM structure of the entire layout. The main part is the center,left, and right columns wrapped by the Container. Center is defined first.

2. The CSS code

Assuming the fixed width on the left is 200px and the fixed width on the right is 150px, set it on the container first:

#container {
  padding-left: 200px; 
  padding-right: 150px;
}
Copy the code

The corresponding space is reserved for the left and right columns, and the following schematic diagram is obtained:


Creating a layout frame

Then set the width and float for each of the three columns and clear float for the footer:

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}
Copy the code

The following results are obtained:


Set the width and clear the float

By the nature of the float, the left and right are “squeezed” into the second row because the center is 100% wide, taking up all the space in the first row.

The next step is to place the left in the position previously reserved, using a negative margin:

#left {
  width: 200px; 
  margin-left: -100%;
}
Copy the code

Get:


Move left to the reserved position -1

We then need to use the position method:

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}
Copy the code

Here use position: relative and right: 200px to move the left position 200px from the original position to complete the left placement:


Move left to reserved position -2

Next place right, just add a declaration:

#right {
  width: 150px; 
  margin-right: -150px; 
}
Copy the code

To get the final effect:


Move right to the reserved position

At this point, the layout is complete. There is one last step to consider, however, and that is the minimum width of the page: in order for the layout to work properly, you need to set a minimum width for the page because both sides have fixed widths, but this is not simply 200+150=350px. Remember that left used position: relative, so that means there is still a left width at the beginning of center. So the minimum page width should be set to 200+150+200=550px:

body {
  min-width: 550px;
}
Copy the code

To sum up, the CSS code for the Holy Grail layout is:

body {
  min-width: 550px;
}

#container {
  padding-left: 200px; 
  padding-right: 150px;
}

#container .column {
  float: left;
}

#center {
  width: 100%;
}

#left {
  width: 200px; 
  margin-left: -100%;
  position: relative;
  right: 200px;
}

#right {
  width: 150px; 
  margin-right: -150px; 
}

#footer {
  clear: both;
}
Copy the code

For an example of the Grail layout, see: Grail Layout

A final reminder of a small detail that many of you might miss: in # Center, you include a declaration width: 100%, which is key to making the middle bar self-adaptive. You may think you don’t need to set this declaration because center defaults to 100% of the width of the parent element (Container) without setting the width. Note, however, that Center is a floating element, and because the float is wrapped, it automatically “shrinks” to the size of the content without explicitly setting the width. If width: 100% is removed, the layout will “collapse” if the middle column contains little or no content.


The middle column contains very little

Twin wing layout

1. The DOM structure

<body>
  <div id="header"></div>
  <div id="container" class="column">
    <div id="center"></div>
  </div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
  <div id="footer"></div>
<body>
Copy the code

The DOM structure of the twin-wing layout differs from the Holy Grail layout in that the Container wraps only the center and moves the.column class from center to the Container.

2. The CSS code

In the same vein as the Grail layout, first set the width and float of each column, and leave space for the left and right columns, and set float clear for the footer:

#container {
  width: 100%;
}

.column {
  float: left;
}

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

#left {
  width: 200px; 
}

#right {
  width: 150px; 
}

#footer {
  clear: both;
}
Copy the code

The following effect is obtained:


Initial setup of twin wing layout

The above code sets container,left,right to float: Inside the Container, center is set to 100% of the container’s width by default because it is not set to float. Margin-left and margin-right are set to leave space for the left and right columns.

Place left in reserved position:

#left {
  width: 200px; 
  margin-left: -100%;
}
Copy the code

Get:


Place left in the reserved position

Place right in the reserved position:

#right {
  width: 150px; 
  margin-left: -150px;
}
Copy the code

Get the end result:


Final effect of dual wing layout

Finally, calculate the minimum page width: since the dual-wing layout does not use position: Relative for positioning, the minimum page width should be 200+150=350px. But when the page width shrinks to around 350px, it squeezes out the middle column and overwrites the content in the right column, as shown below:


The middle column is overwritten

Therefore, when setting the minimum page width, you should add some width for the middle column (say 150px), then:

body {
  min-width: 500px;
}
Copy the code

So far the twin wing layout is done! The overall layout code is:

body {
  min-width: 500px;
}

#container {
  width: 100%;
}

.column {
  float: left;
}
        
#center {
  margin-left: 200px;
  margin-right: 150px;
}
        
#left {
  width: 200px; 
  margin-left: -100%;
}
        
#right {
  width: 150px; 
  margin-left: -150px;
}
        
#footer {
  clear: both;
}
Copy the code

For an example of a twin-wing layout, see twin-wing layout

Summary and Reflection

The Holy Grail layout is more intuitive and natural in the DOM structure, and it is easier to form such a DOM structure in the daily development process (usually

As you can see, both have implemented an additional

tag to keep the middle column floating (and then having to explicitly set the width) while limiting the width to make room for the side columns.

From this point of view, can you achieve the same layout without the extra

tags? The answer is yes, but it requires compatibility sacrifices:

DOM structure

<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
Copy the code

After removing the extra

tag, the DOM structure obtained is as shown above, and the implementation idea based on the dual-wing layout only needs to be modified in center:

1. Use the calc ()

.column {
  float: left;
}
    
#center {
  margin-left: 200px;
  margin-right: 150px;
  width: calc(100% - 350px);
}
Copy the code

It is very easy to calculate the adaptive width that center should occupy through Calc (), which currently supports IE9.

2. Use the border – box

.column {
  float: left;
}
    
#center {
  padding-left: 200px;
  padding-right: 150px;
  box-sizing: border-box;
  width: 100%;
}
Copy the code

Border-box can be used to set the width of the center box model to 100% of the parent element, and padding-left and padding-right can be used to automatically get the adaptive width of the middle column. Note, however, that since the padding is part of the box, the padding will have the background color of the middle bar. When the middle bar is higher than the side bar, this will happen:


Padding Background color affects the left space

Box-sizing currently supports IE8.

3. Using flex

Using Flex here still requires the same DOM structure as the Holy Grail layout, but it will be simpler to implement:

<! - the DOM structure -- -- > < div id = "container" > < div id = "center" > < / div > < div id = "left" > < / div > < div id = "right" > < / div > < / div >Copy the code

The CSS code is as follows:

#container {
    display: flex;
}

#center {
    flex: 1;
}

#left {
    flex: 0 0 200px;
    order: -1;
}

#right {
    flex: 0 0 150px;
}
Copy the code

conclusion

The above is some summary and understanding in the process of learning the Layout of the Holy Grail and the layout of the twin wings, as a beginner of the small white will inevitably have understanding is not in place. If there are any mistakes in this article, you are welcome to comment on it

Recommended readingMore highlights

  • HTML+CSS(47-72) Q&A questions 47/72 Common Browser compatibility Problems and solutions? Reference Answer (1) Browser compatibility Problem 1: Different browser tags default add-on… _Yfling Read 8,760 comments 1 Like 86
  • Positioning allows you to take elements from a normal document flow layout and make them behave differently, such as placing them on top of another element, or keeping them at all times… Purple Moon Lingfeng Read 212 Comments 0 Likes 0
  • In the front layout, the Grail layout is actually the same thing as the Twin wing layout. They all implement a three-column layout with fixed width boxes on both sides and adaptive boxes in the middle… Feng Ming Read 663 comment 1 like 5
  • Layout is an important part of CSS, this article summarizes the common skills in CSS layout, including the common horizontal center, vertical center method, and single… Web front-end Learning Read 977 Comments 0 Upvotes 38
  • What does a three-column layout look like? The three-column layout is left and right side floating, while the middle width ADAPTS to the effect of not floating. Three-column layout three-column layout… Big Chun Chun read 1,097 comments 5 likes 25