Skip to main content

3 ways to achieve three-column layout

· 2 min read

What is a three-column layout?​

Three-column layout is an adaptive layout with a fixed width for the left and right columns and an adaptive content area in the middle.

If you want to achieve two-column layout, you can read this article 5 ways to achieve two-column layout.

Let's say we have this basic HTML structure.

.container {
  width: 100%;
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
.content {
  height: 400px;
  background-color: #d9480f;
}
.right {
  height: 400px;
  width: 200px;
  background-color: #c0eb75;
}
/* when float left, clear both is to deal with height 0 */
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
<div class="container clearfix">
  <div class="left">200px width</div>
  <div class="content">auto adapter</div>
  <div class="right">200px width</div>
</div>

float with calc​

  1. left column set float left.
  2. content set width calc(100% - 400px);
  3. right column set float right.

400px is the width of left and right column.

.left {
  float: left;
}
.content {
  width: calc(100%-400px);
}
.right {
  float: right;
}

flex layout​

flex layout is a new layout property supported by modern browsers, which makes it very convenient to use flex for layout. It is very similar to the previous two layouts. The complete code is as follows.

.container {
  display: flex;
}
.left,
.right {
  width: 200px;
}
.content {
  flex: 1;
}

grid layout​

grid layout also is a convenient way to implement a three-column layout. It is very similar to flex layout. The complete code is as follows.

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

This article is original, without authorization, any media or personal we media and any statement reproduced

Commercial infringement will be investigated, if you need authorization please contact[email protected]

The original link:https://www.jstyro.com/blog/three-column-layout

Buy me a coffee