This article summarizes the specific use of CSS two column layout and three column layout

Time:2021-3-3

preface

With the development of big front-end, UI frameworks emerge in endlessly, which makes our front-end development less demanding or less strict on CSS, at least less important than JS programming. However, we still need to master the basic CSS. Today, let’s summarize and write down the way of CSS layout.

Two column layout

Left column fixed width, right column adaptive

Float + margin layout

HTML code

<body>
  < div id = "left" > left column fixed width < / div >
  < div id = "right" > right column adaption < / div >
</body>

CSS code:

#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  Margin left: 200px; / * greater than or equal to the width of the left column*/
  height: 400px;
  background-color: lightgreen;
}

Flow + overflow layout

HTML code

<body>
  < div id = "left" > left column fixed width < / div >
  < div id = "right" > right column adaption < / div >
</body>

CSS code


#left {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

Absolute positioning layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  position: relative;
}
#left {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#right {
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  height: 400px;
  background-color: lightgreen;
}

Table layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  width: 100%;
  height: 400px;
  display: table;
}
#left,
#right {
  display: table-cell;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

Flex layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  width: 100%;
  height: 400px;
  display: flex;
}
#left {
  width: 200px;
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

Grid layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-columns: 200px auto;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

The left column is variable width, the right column is adaptive

The width of the left column box changes with the content increasing or decreasing, and the right column box is adaptive

Flow + overflow layout

HTML code:

<body>
  < div id = "left" > left column width
  < div id = "right" > right column adaption < / div >
</body>

CSS code:


#left {
  float: left;
  height: 400px;
  background-color: lightblue;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

Flex layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column width
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  display: flex;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

Grid layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column width
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#right {
  background-color: lightgreen;
}

Three column layout

Two columns with fixed width and one column with self adaptation

Float + margin layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "center" > middle column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:

#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  Margin left: 300px; / * width of left column + width of middle column*/
  height: 400px;
  background-color: lightgreen;
}

Flow + overflow layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "center" > middle column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  height: 400px;
}
#left {
  float: left;
  width: 100px;
  height: 400px;
  background-color: lightblue;
}
#center {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightgrey;
}
#right {
  overflow: hidden;
  height: 400px;
  background-color: lightgreen;
}

Table layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "center" > middle column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  display: table;
  width: 100%;
  height: 400px;
}
#left {
  display: table-cell;
  width: 100px;
  background-color: lightblue;
}
#center {
  display: table-cell;
  width: 200px;
  background-color: lightgrey;
}
#right {
  display: table-cell;
  background-color: lightgreen;
}

Flex layout

HTML code:

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "center" > middle column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code:


#parent {
  display: flex;
  width: 100%;
  height: 400px;
}
#left {
  width: 100px;
  background-color: lightblue;
}
#center {
  width: 200px;
  background-color: lightgrey;
}
#right {
  flex: 1;
  background-color: lightgreen;
}

Grid layout

HTML code

<body>
  <div id="parent">
    < div id = "left" > left column fixed width < / div >
    < div id = "center" > middle column fixed width < / div >
    < div id = "right" > right column adaption < / div >
  </div>
</body>

CSS code


#parent {
  display: grid;
  grid-template-columns: 100px 200px auto;
  width: 100%;
  height: 400px;
}
#left {
  background-color: lightblue;
}
#center {
  background-color: lightgrey;
}
#right {
  background-color: lightgreen;
}

Left and right width, adaptive in the middle

The Holy Grail layout and double wing layout are designed to load the middle part first, and then start to load the left and right parts, which are relatively less important.

Grail layout

Holy Grail layout: in order to make the middle content not be blocked, set the middle div (or outermost parent DIV) to padding left and padding right (the value is equal to the width of left and right), and use the relative layout position: relative with the left and right attributes respectively, so that the middle div will not be blocked after the left and right divs move.

HTML code:

<body>
  <div id="parent">
    < div id = "center" > middle column < / div >
    < div id = "left" > left column < / div >
    < div id = "right" > right column < / div >
  </div>
</body>

CSS code:

#parent {
  height: 400px;
  padding: 0 200px;
  overflow: hidden;
}
#left,
#right {
  float: left;
  width: 200px;
  height: 100%;
  position: relative;
  background-color: lightblue;
}
#left {
  Margin left: - 100%; / * make left one line up*/
  left: -200px;
}
#right {
  right: -200px;
  Margin left: - 200px; / * make right up one line*/
}
#center {
  float: left;
  width: 100%;
  height: 100%;
  background-color: lightgrey;
}

Double wing layout

In the layout of double wings, in order to keep the contents of the middle div from being blocked, a sub div is directly created inside the middle div to place the contents. In the sub div, margin left and margin right are used to reserve space for the left and right divs.

HTML code:

<body>
  <div id="parent">
    <div id="center">
      < div id = "center inside" > middle column < / div >
    </div>
    < div id = "left" > left column < / div >
    < div id = "right" > right column < / div >
  </div>
</body>

CSS code:

#left,
#right {
  float: left;
  width: 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  Margin left: - 100%; / * make left one line up*/
}
#right {
  Margin left: - 200px; / * make right up one line*/
}
#center {
  float: left;
  width: 100%;
  height: 400px;
  background-color: lightgrey;
}
#center-inside {
  height: 100%;
  margin: 0 200px;
}

Flex implementation

HTML code:

<body>
  <div id="parent">
    < div id = "center" > middle column < / div >
    < div id = "left" > left column < / div >
    < div id = "right" > right column < / div >
  </div>
</body>

CSS code:

#parent {
  display: flex;
}
#left,
#right {
  flex: 0 0 200px;
  height: 400px;
  background-color: lightblue;
}
#left {
  Order: - 1; / * left*/
}
#center {
  flex: 1;
  height: 400px;
  background-color: lightgrey;
}

This article about a summary of CSS two column layout and three column layout of the specific use of the article is introduced here, more relevant CSS two column layout and three column layout content please search developer previous articles or continue to browse the following related articles, I hope you can support developer more in the future!