introduce
The Grail layout solves the same problem as the twin-wing layout: a two-sided, adaptive three-column layout with the middle column placed in front of the document stream to render first.
The first half of the grail layout is the same as the double wing layout, where all three columns float, but add negative margin to the left and right columns to make them side by side with the middle div to create a three-column layout.
The difference between
The difference lies in the different idea of solving the problem of “the content of the middle column div is not blocked” : Holy Grail layout. In order to prevent the content of the middle div from being blocked, the left and right padding-left and padding-right of the middle div are set, and the left and right divs are placed in relative layout position: Relative is combined with the right and left attributes respectively, so that the middle div is not obscured when the left and right column divs move.
In the dual-wing layout, in order to keep the contents of the middle div unblocked, a child div is directly created inside the middle div to place the contents. Margin-left and margin-right are used in the child div to leave space for the left and right columns. 1 more div, less 4 CSS properties (divpadding-left and padding-right in the middle), plus the left and right div position: relative and the corresponding right and left properties, a total of 6; While the two wings layout subdiv uses two attributes of margin-left and margin-right, 6-2=4), I think it is more direct and simple than the Holy Grail layout.
In terms of simple
The relative layout creates one more div than the Holy Grail layout, but not relative. Results demonstrate
Contrast figure 
Grail layout:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> #hd {height: 50px; background: #666; text-align: center; */ padding: 0 200px 0 180px; */ padding: 0 200px 0 180px; height: 100px; } #middle { float: left; width: 100%; /* left column to the first row */ height: 100px; background: blue; } #left { float: left; width: 180px; height: 100px; margin-left: -100%; background: #0c9; /* Position: relative; /* position: relative; left: -180px; } #right { float: left; width: 200px; height: 100px; margin-left: -200px; background: #0c9; /* Position: relative; /* position: relative; right: -200px; } #footer { height: 50px; background: #666; text-align: center; } </style> </head> <body> <div id="hd">header</div> <div id="bd"> <div id="middle">middle</div> <div id="left">left</div> <div id="right">right</div> </div> <div id="footer">footer</div> </body> </html>Copy the codeDouble wing layout
Code:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> #hd{height:50px; background: #666; text-align: center; } #middle{ float:left; width:100%; /* left column to the first row */ height:100px; background:blue; } #left{ float:left; width:180px; height:100px; margin-left:-100%; background:#0c9; } #right{ float:left; width:200px; height:100px; margin-left:-200px; background:#0c9; */ #inside{margin:0 200px 0 180px; height:100px; } #footer{ clear:both; /* remember to float */ height:50px; background: #666; text-align: center; } </style> </head> <body> <div id="hd">header</div> <div id="middle"> <div id="inside">middle</div> </div> <div id="left">left</div> <div id="right">right</div> <div id="footer">footer</div> </body> </html>Copy the code