Introduction to the Holy Grail layout and the two-wing layout in CSS (with code)

This article introduces you to the content of the CSS in the Holy Grail layout and the introduction of the two-wing layout (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Holy Grail Layout

<div id= "header" > #header </div>  <div id= "container" >    <div id= "center" class= "column" > #center </div>    <div id= "left" class= "column" > #left </div>    <div id= "right" class= " Column > #right </div>  </div>  <div id= "Footer" > #footer </div>

The effect of the implementation is mainly in container, left and rgith fixed width, center first rendering, and adaptive width.

    body {      min-width:500px;    }    #container {      overflow:auto;        /* BFC */      padding-left:180px;      padding-right:150px;    }    #container. column {      height:200px;      position:relative;      Float:left;    }    #center {      background-color: #e9e9e9;      width:100%;    }    #left {      background-color:red;      width:180px;      right:180px;       Margin-left: -100%    }    #right {      background-color:blue;      width:150px;       Margin-right: -150px;    }    #header,     #footer {      background-color: #c9c9c9;    }

Several points to note in this scenario:

1. The center element is positioned before left and right before the center renders, and the user first sees the main content of the page.

2. Container (width:100%) wrapped three columns of content, through Padding-left and padding-right for the left and right two columns to make room.

3. Center,left,right all set a left float (float:left), so the container interior is a floating stream .

4. The left element is set so that it moves to the upper- margin-left: -100% right corner of the container, where position：relative； right: 180px it moves to the container padding-left position.

5. Set the right element margin-right: -150px so that it moves to the position of the container padding-right.

Ps:margin-left and Margin-right take advantage of the characteristics of floating streams, allowing the first row to accommodate the three elements of Center,left,right.

Holy Grail Layout (Flexbox implementation)

<div id= "Holygrail" >  <div id= "header" > #header </div>  <div id= "container" >    < Div id= "center" class= "column" > #center </div>    <div id= "left" class= "column" > #left </div>    <div id= "right" class= "column" > #right </div>  </div>  <div id= "Footer" > #footer </div>

    body {      min-width:550px;      }    #HolyGrail {      Display:flex;      MIN-HEIGHT:100VH;      Flex-direction:column;    }    #container {      Display:flex;      flex:1;    }    #center {      background-color: #e9e9e9;      flex:1;    }    #left {      background-color:red;      Order:-1;      width:150px;    }    #right {      background-color:blue;      width:150px;    }    #header,     #footer {      height:50px;      Background-color: #c9c9c9;    }

If you do not consider ie10 and the following browsers, you can use flex to achieve the Grail layout. And the Grail layout allows the footer to achieve a sticky effect by letting the container fill the height.
Flex compatibility

Dual Wing layout

The Grail layout and the double-wing layout solve the problem is the same, the two sides of the fixed width, the middle of the adaptive three-column layout, the middle bar to be placed in front of the document flow priority rendering. The Grail layout and the two-wing layout solution to the problem is the same in the first half, that is, the three columns all float float, but the left and right two columns plus a negative margin to the middle column P side to form a three-column layout. the difference lies in solving the idea that the middle P content is not obscured.

1. The Holy Grail layout for the intermediate content is not modified, is through the package element padding-left and padding-right to make the content p in the middle, and then through relative positioning position:relative , with right or left property to let the right two columns not when the middle content.

2. The solution for the dual-wing layout is to add a p to the content by adding a second inside the intermediate element, and then leave the position between the left and right margins margin-left and margin-right the left and right columns.

3. The two-wing layout has more than 1 p tags, and less than 4 CSS properties. Less use of padding-left,padding-right, about two p with relative layout position:relative and corresponding right and left, more margin-left,margin-right.

<div id= "header" > #header </div> <div id= "container" > <div Id= "Center" class= "column" > <div id= "center-content" > #center </div> </div> <div id= "left "class=" column "> #left </div> <div id=" right "class=" column "> #right </div> </div> <div ID = "Footer" > #footer </div> 

 body {min-width:500px;        } #container {Overflow:auto;      /* BFC */} #container. column {height:200px;    Float:left;      } #center {background-color: #e9e9e9;    width:100%;      } #center-content {margin-left:180px;    margin-right:150px;      } #left {width:180px;      background-color:red;    Margin-left:-100%;      } #right {background-color:blue;        width:150px;     Margin-left: -150px;    } #header, #footer {background-color: #c9c9c9; }