Understanding the Holy Grail Layout and the Double Flying Wing Layout

holy grail layout

The holy grail layout is a three-column layout, with an adaptive width in the middle and fixed widths on both sides. The advantage of this is that important things can be rendered first when placed in front of the document flow. That is, in the html document, the middle part should be written before the left and right layouts.
Of course, this layout is for the PC side. Due to the small screen width of the mobile side, multi-column layout is not recommended.

 DOM structure:

	<div class="content">
	    <div class="main">Main</div>
	    <div class="left">Left</div>
	    <div class="right">Right</div>
	</div>

 1. Negative value of float + margin-left (most commonly used)

<style>
    *{
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    /* 中间布局的样式 */
    .content {
      height: calc(100% - 160px);
      /* 根据左边栏和右边栏的宽度设置padding,留出位置放left和right */
      padding: 0 150px 0 200px;
    }
    /* main优先渲染，宽度设为100% */
    .main {
      width: 100%;
      height: 100%;
      float: left;
      background-color: rgb(233, 193, 215);
    }
    /* 左右栏的宽度固定 */
    .left {
      height: 100%;
      width: 200px;
      float: left;
      background-color: rgb(204, 245, 224);
      margin-left: -100%;
      /* 开启定位 设置left */
      position: relative; 
      left: -200px;
    }
    .right {
      height: 100%;
      width: 150px;
      float: left;
      background-color: rgb(200, 226, 244);
      margin-left: -150px;
      position: relative;
      right: -150px;
    }
  </style>

2. Positioning layout

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    /* 中间布局的样式 */
    .content {
      width: 100%;
      height: calc(100% - 160px);
      /* 根据左边栏和右边栏的宽度设置padding,留出位置放left和right */
      padding: 0 150px 0 200px;
      position: relative;
      box-sizing: border-box;
    }
    .content div {
      position: absolute;
      height: 100%;
      text-align: center;
    }
    /* main优先渲染，宽度设为100% */
    .main {
      width: 100%;
      right: 0;
      background-color: rgb(233, 193, 215);
    }
    /* 左右栏的宽度固定 */
    .left {
      width: 200px;
      left: 0;
      background-color: rgb(204, 245, 224);
    }
    .right {
      width: 150px;
      right: 0;
      background-color: rgb(200, 226, 244);
    }
  </style>

 3. Flex layout

 DOM structure:

	<div class="content">
	    <div class="left">Left</div>
	    <div class="main">Main</div>
	    <div class="right">Right</div>
	</div>

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html, body {
      width: 100%;
      height: 100%;
    }
    /* 中间布局的样式 */
    .content {
      display: flex;
      justify-content: space-between;
      height: calc(100% - 160px);
    }
    /* main优先渲染，宽度设为100% */
    .main {
      width: 100%;
      right: 0;
      flex: 1;
      background-color: rgb(233, 193, 215);
    }
    /* 左右栏的宽度固定 */
    .left {
      width: 200px;
      height: 100%;
      background-color: rgb(204, 245, 224);
    }
    .right {
      width: 150px;
      height: 100%;
      background-color: rgb(200, 226, 244);
    }
  </style>

The Holy Grail layout problem.
After the browser window is narrowed to a certain extent, the layout is all messed up. The reason is: because the left and right boxes are set to relative positioning, when the positions where the left and right boxes should be overlapped, one line cannot be placed, so the There are two solutions:
1. Set the minimum width for the parent container. The minimum width is calculated as: left box width * 2 + right box width
2. Use double flying wing layout

Double wing layout

Put a layer of container on the middle part. After doing this, the large container no longer needs to set the padding value, and the left and right column boxes do not need to set the relative layout. The code is much simplified, and there will be no special narrow layout above. will mess up the problem.

DOM structure:

	<div class="container"> 
	    <div class="main">
	      <div class="content">main</div> 
	    </div>
	    <div class="left">left</div> 
	    <div class="right">right</div> 
    </div>

  <style>
    .left, .main,.right {
      float: left;
      text-align: center;
      min-height: 500px;
    }
    .left {
      width: 200px;
      background-color: rgb(204, 245, 224);
      margin-left: -100%;
    }
    .right {
      width: 300px;
      background-color: rgb(200, 226, 244);
      margin-left: -300px;
    }
    .main {
      width: 100%;
      background-color: rgb(233, 193, 215);
    }
    .content {
      margin: 0 300px 0 200px;
    }
  </style>