rendering

By zooming the page and changing the width of the page, the three-column layout gives priority to the middle box rendering, and the width of the boxes on both sides is fixed. Even if the page width becomes smaller, it does not affect our browsing. Note: To be safe, it’s best to give the body a minimum width!

Grail layout requirements

| – the header and footer each captured all the screen width, height of fixed.

  • The container in the middle is a three-column layout.
  • The width of the three-column layout is fixed on both sides, and the middle section automatically fills the entire area.
  • The height of the middle section is the height of the highest area of the three columns. |

Three implementations of the Grail layout

A, floating,

  • Define header and footer styles so that they are fully aligned horizontally.
  • The three columns in the Container are set to float and relative position (used later), center is placed first, and footer clears floats.
  • The left and right columns of the three columns are 200px and 150px wide, with the center set to be 100% full
  • In this way, the center will occupy the entire container due to floating, and the left and right areas will be squeezed down
  • Next, set the leftmargin-left: -100%;Return left to the left of the previous row
  • But this will hide the center, so set the outer containerpadding-left: 200px; padding-right: 150px;Make room for left and right
  • At this time, the left is not on the left, because the relative positioning has been set before, so it passesleft: -200px;Pull left back to the far left
  • Again, for the right field, setmargin-left: -150px;Pull right back to the first row
  • Now I have 150px space left on the right, so I set it lastright: -150px;Just pull the right area to the far right.
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }
 
  #header.#footer {
    background: rgba(29.27.27.0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #footer {
    clear: both;
  }
 
  #container {
    padding-left: 200px;   /* leftContent width */
    padding-right: 150px;  /* rightContent width */
    overflow: hidden;
  }
 
  #container .column {
    position: relative;
    float: left;
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
 
  #center {
    width: 100%;
    background: rgb(206.201.201);
  }
 
  #left {
    width: 200px;           /* leftContent width */
    right: 200px;           /* leftContent width */
    margin-left: -100%;
    background: rgba(95.179.235.0.972);
  }
 
  #right {
    width: 150px;           /* rightContent width */
    margin-left: -150px;   /* rightContent width */
    right: -150px;
    background: rgb(231.105.2);
  }
 
</style>
 
<body>
  <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>

Copy the code

Two, Flex elastic box

  • Header and footer styles are set horizontally.
  • In a Container, arrange the left, Center, and right parameters in sequence
  • Set the elastic layout for Containersdisplay: flex;
  • Left and right area fixed width, set centerflex: 1;Can be
<style>
  body {
    min-width: 550px;  
    font-weight: bold;
    font-size: 20px;
  }
  #header.#footer {
    background: rgba(29.27.27.0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
   display: flex;
  }
  #container .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #center {
    flex: 1;
    background: rgb(206.201.201);
  }
  #left {
    width: 200px;        
    background: rgba(95.179.235.0.972);
  }
  #right {
    width: 150px;           
    background: rgb(231.105.2);
  }
</style>
 
<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="left" class="column">#left</div>
    <div id="center" class="column">#center</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>
Copy the code

Three, grid layout

As shown in the figure above, we divide the body into three rows and four columns, with five column gridlines

  • Add to the body elementdisplay: grid;Property becomes a grid
  • Set the header elementgrid-row: 1; 和 grid-column: 1/5;This means that those occupying the first row of the grid begin on the first column and end on the fifth column
  • Set the footer elementgrid-row: 1; 和 grid-column: 1/5;This means that those occupying the third row of the grid begin on the first column and end on the fifth column
  • Set the left elementgrid-row: 2; 和 grid-column: 1/2;This means that those occupying the second row of the grid begin on the first column and end on the second column
  • Set the Center elementgrid-row: 2; 和 grid-column: 2/4;This means that those occupying the second row of the grid begin on the second column and end on the fourth column
  • Set the right elementgrid-row: 2; 和 grid-column: 4/5;This means that those occupying the second row of the grid begin on the fourth and end on the fifth
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
    display: grid;
  }
  #header.#footer {
    background: rgba(29.27.27.0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #header {
    grid-row: 1;
    grid-column: 1/5;
  }
  #footer {
    grid-row: 3;
    grid-column: 1/5;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left {
    grid-row: 2;
    grid-column: 1/2;
    background: rgba(95.179.235.0.972);
  }
  #center {
    grid-row: 2;
    grid-column: 2/4;
    background: rgb(206.201.201);
  }
  #right {
    grid-row: 2;
    grid-column: 4/5;
    background: rgb(231.105.2);
  }
</style>
 
<body>
  <div id="header">#header</div>
  <div id="left" class="column">#left</div>
  <div id="center" class="column">#center</div>
  <div id="right" class="column">#right</div>
  <div id="footer">#footer</div>
</body>
Copy the code

Original link: CSDN blogger “Lattice shop of Wooden House”