1, the preface

The Grail layout and the twin wing layout achieve the same layout effect, namely the left, middle and right three-column layout with fixed width on both sides and adaptive width in the middle.

2. The difference between the Grail layout and the Twin wing layout

Add a negative margin to the left and right columns and make them side by side with the middle column to create a three-column layout. After setting the left and right padding for the divs of the left, middle and right columns of the holy Grail layout, use relative layout relative to the left and right columns, combined with the right and left attributes respectively, so that the left and right columns do not block the middle column when they are shifted relative to themselves. The layout of the twin wings wraps a layer of div in the middle column. After div occupies 100% width, the width of left and right margin of div is left and right respectively, so that the left and right columns do not block the middle column.

3. Grail layout and double wing layout are realized

The holy grail layout

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Horizontal vertical center </title> <style type="text/ CSS ">. Container { padding: 0 200px 0 100px; } .middle { float: left; width: 100%; height: 200px; background: red } .left,.right { float: left; position: relative; height: 200px; } .left { width: 100px; margin-left: -100%; left: -100px; background: green; } .right { width: 200px; margin-right: -200px; background: yellow; } </style> </head> <body> <div class="container"> <div class="middle"> middle </div> <div class="left"> left </div> <div  class="right"> right </div> </div> </body> </html>Copy the code

Twin wing layout

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Horizontal vertical center </title> <style type="text/ CSS ">. Container { float: left; width: 100%; } .middle { margin: 0 200px 0 100px; background: red; height: 200px; } .left,.right { float: left; position: relative; height: 200px; } .left { width: 100px; margin-left: -100%; background: green; } .right { width: 200px; margin-left: -200px; background: yellow; } </style> </head> <body> <div> <div class="container"> <div class="middle"> middle </div> </div> <div class="left"> left </div> <div class="right"> right </div> </div> </body> </html>Copy the code

4. Other implementation methods

4.1 use calc

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> <style type="text/ CSS "> .left,.right,.middle { float: left; position: relative; height: 200px; } .middle { width: calc(100% - 300px); background: red } .left { width: 100px; background: green; } .right { width: 200px; background: yellow; } </style> </head> <body> <div class="left"> left </div> <div class="middle"> middle </div> <div class="right"> right </div> </body> </html>Copy the code

4.2 Using Flex layout

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> Horizontal vertical center </title> <style type="text/ CSS ">. Container { display: flex; flex-direction: row; height: 200px; } .middle { flex: 1; background: red } .left { width: 100px; background: green; } .right { width: 200px; background: yellow; } </style> </head> <body> <div class="container"> <div class="left"> left </div> <div class="middle"> middle </div> <div  class="right"> right </div> </div> </body> </html>Copy the code

5, summary

The three-column layout with fixed width on both sides and self-adaptation in the middle is the most common layout used in the actual development process. Some implementation methods of the Grail layout and the double-flying wing layout are introduced above. In practice, it is recommended to use Flex for implementation, other methods are just for understanding.