Today we summarize how the Holy Grail layout is implemented. Here are five. All but the third one is easier to understand. The third one suggests margin and left add styles step by step and see what happens.

The holy grail layout

A, flex

<style>.header,.footer{background: rgba(29,27,27,0.726); height: 60px; } .container{ display: flex; } .left, .right, .middle{ height: 300px; } .left{ width: 200px; Background: RGBA (95, 179, 235, 0.972); } .right{ width: 150px; background: rgb(231, 105, 2); } .middle{ background: rgb(206, 201, 201); flex: 1; // flex: 1 === flex: 1 1; flex: 1 ! == flex: 1 1 auto; } </style> <body> <div> <div class="header"></div> <div class="container"> <div class="left"></div> <div class="middle"></div> <div class="right"></div> </div> <div class="footer"></div> </div> </body>Copy the code

Second, the grid

  <style>
 .box{
   display: grid;
 }
 .header,
 .footer{
   height: 60px;
   background: turquoise;
 }
 .left,
 .right,
 .middle{
   height: 300px;
 }
 .header{
   grid-row: 1;
   grid-column: 1/6;
 }
 .footer{
   grid-row: 3;
   grid-column: 1/6;
 }
 .left{
    grid-row: 2;
   grid-column: 1/2;
   background: pink;
 }
 .middle{
    grid-row: 2;
   grid-column: 2/5;
   background: yellow;
 }
 .right{
    grid-row: 2;
   grid-column: 5/6;
   background: red;
 }
  </style>
  
  <body>
  <div class="box">
    <div class="header"></div>
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    <div class="footer"></div>
  </div>
</body>
Copy the code

Float (middle part all float:left)

<style> .header, .footer{ height: 60px; background: #ccc; } .footer{ clear: both; } .container{ padding-left: 100px; padding-right: 250px; } .column{ float: left; position: relative; font-size: 20px; } .middle{ width: 100%; background: yellow; } .left{ width: 100px; background: pink; margin-left: -100%; left: -100px; } .right{ width: 250px; background: aqua; margin-left: -250px; left: 250px; </style> <div class="box"> <div class="header"></div> <div class="container"> <div class="middle column"> <div class="left column"> I am left </div> <div class="right column"> I am right </div> </div> <div class="footer"></div> </div>Copy the code

Float :left; float:left; On the right side of the float: right.)

<style> .header, .footer{ height: 60px; background: #ccc; } .container{ overflow: hidden; } .middle{ background: yellow; } .left{ float: left; width: 100px; background: pink; } .right{ float: right; width: 250px; background: aqua; } </style> <body> <div class="box"> <div class="header"></div> <div class="container"> <div class="left Column "> I am left </div> <div class="right column"> I am right </div> <div class="middle column"> I am middle </div> </div> <div class="footer"></div> </div> </body>Copy the code

Five, relative positioning + absolute positioning

.header, .footer{ height: 60px; background: #ccc; }. The container {min - height: 1.2 em. position: relative; } .container>div{ position: absolute; } .middle{ left: 100px; right: 250px; background: yellow; } .left{ left: 0; top: 0; width: 100px; background: pink; } .right{ right: 0; top: 0; width: 250px; background: aqua; } </style> <body> <div class="box"> <div class="header"></div> <div class="container"> <div class="left Column "> I am left </div> <div class="middle column"> I am middle </div> <div class="right column"> I am right </div> </div> <div class="footer"></div> </div> </body>Copy the code

Twin wing layout

<style> *{ margin: 0; padding: 0; } .middle { background: yellow; height: 500px; } .left { float: left; width: 200px; height: 300px; background: pink; } .right { float: right; width: 250px; height: 300px; background: aqua; </style> <body> <div class="container"> <div class="left"> </div> <div class="right"> </div> <div </div> </div> <body>Copy the code

The twin wing layout can be modified from the Grail layout.

Nine grid layout

Flex layout

Margin-left; margin-top; margin-left; margin-top; <style> .container{ width: 200px; height: 200px; } .row { display: flex; } .item { border: solid black 1px; flex-grow: 1; margin-left: -1px; margin-top: -1px; } </style> <div class="container"> <div class='row'> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> <div class='row'> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> <div class='row'> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div> </div>Copy the code

The table layout

<style>
        .container{
            width: 200px;
            display: table
        }
    .row{
        display: table-row;
    }
    .item{
        display: table-cell;
        border: 1px solid black;
        margin-left: -1px;
        margin-top: -1px;
    }
    <div class="container">
                <div class='row'>
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                </div>
                <div class='row'>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>
                </div>
                <div class='row'>
                    <div class="item">7</div>
                    <div class="item">8</div>
                    <div class="item">9</div>
                </div>
        </div>
Copy the code

The grid layout

<style>
        .container{
            width: 200px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }
        .item{
            border: 1px solid black;
            margin-left: -1px;
            margin-top: -1px;
        }
    </style>
    <div class="container">
                <div class='row'>
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                </div>
                <div class='row'>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>
                </div>
                <div class='row'>
                    <div class="item">7</div>
                    <div class="item">8</div>
                    <div class="item">9</div>
                </div>
        </div>
Copy the code