5 ways to achieve a three-column layout

If the other shore prosperousfalls, who accompany me to see the sunset fleeting

Writing in the front

How well you know CSS layouts determines how fast you can develop pages in Web development. As Web technology continues to evolve, there are countless ways to implement layouts.

I recently put together a series of articles over the course of half a month, using fragment time, that summarized the various layouts in CSS, as well as their implementation methods and common techniques. This series gives you a new look at CSS layouts.

This series of navigation post I enter, which can quickly jump to the article you want to know (suggested favorites)

Three-column layout overview

There are two main types of three-column layouts:

  • First, the first two columns are fixed width, and the last column is adaptive, which is essentially the same as the two-column layout, can be implemented by referring to the two-column layout

  • The second is the fixed width of the two columns before and after, and the middle is self-adaptive. The final effect is as follows

    This article mainly introduces the second kind

Five ways to achieve a three-column layout

Before we start today’s article, let’s put today’s main code in the following:

The common CSS styles are as follows:

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
}
.content {
  height: 400px;
  background-color: #d9480f;
}
.right {
  height: 400px;
  width: 200px;
  background-color: #c0eb75;
}
.left..content..right {
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
/* Clear float */
.clearfix:after {
  content: ' ';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
Copy the code

The HTML structure is as follows:

<! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">On the left</div>
  <div class="content">content</div>
  <div class="right">right</div>
</div>
Copy the code

Scheme 1 is implemented with float

Implementation steps:

  1. The HTML structure needs to be adjusted to complete the effect.

    <! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">On the left</div>
  <div class="right">right</div>
  <div class="content">content</div>
</div>
Copy the code

  2. The left column container turns on the left float

  3. The right column container enables the right float

  4. The adaptive element setting overflow creates a BFC to complete the adaptation

The complete CSS code is shown below

.left {
  /* 1. Enable the left float for the left column container */
  float: left;
}
.content {
  /* Adaptive element setting overflow creates a BFC to complete the adaptation */
  overflow: hidden;
}
.right {
  /* 2. Enable the right float for the right container */
  float: right;
}
Copy the code

Scheme two is implemented with float

Implementation steps:

  1. The HTML structure needs to be adjusted to complete the effect.

    <! -- Solve height collapse -->
<div class="container clearfix">
  <div class="left">On the left</div>
  <div class="right">right</div>
  <div class="content">content</div>
</div>
Copy the code

  2. The left column container turns on the left float

  3. The right column container enables the right float

  4. Make the middle adaptive width of the parent container minus two constant width columns

The complete CSS code is shown below

.left {
  /* 1. Enable the left float for the left column container */
  float: left;
}
.content {
  /* 3. Make the middle adaptive width equal to the parent container minus two constant width columns */
  width: calc(100%-400px);
}
.right {
  /* 2. Enable the right float for the right container */
  float: right;
}
Copy the code

Through Position

Implementation steps

  1. The left and right columns leave the document flow and are offset to their own regions
  2. Make the middle adaptive width of the parent container minus two constant width columns
  3. Shrink the container inward by margins
.left {
  /* 1. The left and right columns are separated from the document flow and offset to their own region */
  position: absolute;
  left: 0;
  top: 0;
}
.content {
  /* 2. Make the middle adaptive width equal to the parent container minus two constant width columns */
  width: calc(100%-400px);
  /* 3. Shrink the container inward by the margin */
  margin-right: 200px;
  margin-left: 200px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
}
Copy the code

The core of this solution is the calc() function, which you can learn about at the end of my other article “Different CSS” which gives you a look at the various units of CSS mouse scrolling.

Flex layout implementation

This is done primarily through Flex properties with the following example code:

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; Said the flex - turns up: 1; That is, the item occupies all remaining space */
}
Copy the code

For detailed usage of the Flex layout, please refer to my entry

Grid layout implementation

The Grid layout provides this functionality mainly through the template property, as shown below:

.container {
  display: grid;
  /* Divide it into two rows, one with its own width and one with the remaining width */
  grid-template-columns: auto 1fr auto;
}
Copy the code

For details on how to use Grid layout, please refer to me

conclusion