Master Front-End Layouts: From Centering to Multi-Column Designs

Preface

Let’s travel back to the summer when we first drew pages and fully understand front‑end page layout.

Article Expectations

Integrate a layout knowledge network.

Collect best implementations and style snippets (using Less) that are ready to copy.

Summarize high‑frequency interview questions with answers.

Knowledge Network

Common Layouts

CSS layouts can be divided into three categories: centering, multi‑column, and full‑screen layouts.

Centering includes vertical, horizontal, and planar centering.

Multi‑column includes two‑column, three‑column, and generic multi‑column layouts.

Full‑screen includes equal division, equal height, and full‑screen layouts.

<code>graph  TB
A[Common Layouts] --> B1[Centering Layout]
B1 --Five Solutions--> C11[Horizontal Center]
B1 --Five Solutions--> C12[Vertical Center]
B1 --Five Solutions--> C13[Plane Center]

A --> B3[Full‑Screen Layout]

A --> B2[Multi‑Column Layout]
B2 --Seven Solutions--> C21[Two‑Column Right‑Adaptive]
B2 --Four Solutions--> C22[Three‑Column Right‑Adaptive]
B2 --Two Solutions--> C23[Three‑Column Center‑Adaptive (Holy Grail / Double‑Wing)]
</code>

Each layout type has its own best practices, judged mainly by compatibility and usage scenarios. For grid‑based multi‑column layouts, mobile devices typically use the new Flex features, while PC browsers often rely on margin‑negative and inline‑block tricks for compatibility.

Common Implementations

There are six typical implementation methods: box model, float, positioning, Flex layout, Grid layout, and Shapes layout.

<code>graph TB
B4[Common Implementations] --> C1[Float]
B4 --> C2[Box Model]
B4 --> C3[Positioning]
B4 --> C4[Flex & Grid]
B4 --> C5[Columns & Shapes]
</code>

Centering Layout

Vertical Centering

Copy‑Paste

Link: https://github.com/Sympath/duojiUI/blob/master/src/packages/less/center.less

Vertical

Four major categories and six scenarios lead to six optimal solutions.

<code>graph  TB
A[Vertical Center] --> B1[Inline Scenario]
A --> B2[Block Element Scenario]
A --> B3[Multiple Elements Scenario]
A --> B4[Out‑of‑Flow Scenario]
B4 --> C1[Fixed Height]
B4 --> C2[Variable Height]
B4 --> C3[Wrap]
</code>

Inline (inline) Scenario

Set the parent container’s

line-height

.

<code>// Inline (inline) level parent container setting
.inline-mixin (@line-height) {
  line-height: @line-height;
}
</code>

Block (block) Scenario

Convert the child element to

inline‑block

and reuse the inline solution.

<code>// Block (block) level parent container setting
.block-mixin (@line-height) {
  .center-y-inline(@line-height);
  .item {
    display: inline-block;
  }
}
</code>

Multiple Child Containers Scenario

Suitable for Flex layout; set the parent container.

<code>// Flex layout with multiple children
.flex {
  display: flex;
  justify-content: center;
}
</code>

Out‑of‑Flow Scenario

Three cases: fixed height, variable height (using

transform

), and the best‑practice wrap using

margin:auto

.

<code>// Fixed height out‑of‑flow
.position {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
// Variable height out‑of‑flow
.position-mixin (@height : 100%) {
  position: absolute;
  top: 50%;
  margin-top: -@height/2;
}
// Wrap (best solution)
.position-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
</code>

Parent‑level settings:

line-height

(inline),

inline‑block+line-height

(block),

flex+align-items:center

(multiple).

Self‑level settings: positioning with fixed height (

margin-top

negative), variable height (

transform

), and wrap (

margin:auto

).

Horizontal Centering

The same six scenarios apply.

<code>graph  TB
A[Horizontal Center] --> B1[Inline Scenario]
A --> B2[Block Element Scenario]
A --> B3[Multiple Elements Scenario]
A --> B4[Out‑of‑Flow Scenario]
B4 --> C1[Fixed Width]
B4 --> C2[Variable Width]
B4 --> C3[Wrap]
</code>

Inline Scenario

Set the parent container’s

line-height

.

<code>// Inline (inline) level parent container setting
.inline-mixin () {
  text-align: center;
}
</code>

Block Scenario

Convert the child element to

inline‑block

.

<code>// Block (block) level self setting
.block {
  margin-left: auto;
  margin-right: auto;
}
</code>

Multiple Child Containers Scenario

Suitable for Flex layout; set the parent container.

<code>.flex {
  display: flex;
  align-items: center;
}
</code>

Out‑of‑Flow Scenario

Same three cases as vertical centering.

<code>// Variable width out‑of‑flow
.position {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
// Fixed width out‑of‑flow
.position-mixin (@width:100%) {
  position: absolute;
  left: 50%;
  margin-left: -@width/2;
}
// Wrap (best solution)
.position-wrap {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</code>

Parent‑level settings:

text-align

(inline) and

display:flex+align-items:center

(multiple).

Self‑level settings:

margin:auto

for wrap,

margin-left

negative for fixed width, and

transform

for variable width.

Plane (2‑D) Centering

Combine horizontal and vertical solutions.

<code>#center {
  .inline-mixin(@line-height) {
    #center > #x > .inline;
    #center > #y > .inline-mixin(@line-height)
  }
  .block-mixin (@line-height) {
    .center-x-block;
    .center-y-block(@line-height)
  }
  .flex {
    #center > #x > .flex;
    #center > #y > .flex;
  }
  .position-mixin (@width, @height) {
    .center-x-position(@width);
    .center-y-position(@height);
  }
  .position {
    #center > #x > .position();
    #center > #y > .position();
    transform: translate(-50%, -50%);
  }
  .position-wrap {
    #center > #x > .position-wrap();
    #center > #y > .position-wrap();
    margin: auto;
  }
}
</code>

Multi‑Column Layout – Two‑Column

Demo: https://zzmwzy.gitee.io/css-test-online/dist/index.html

Requirement: left column fixed width, right column adaptive.

Vue Component (copy‑paste)

Link: https://github.com/Sympath/duojiUI/blob/master/src/packages/layout/two-column-layout.vue

Float with margin‑negative (PC, may collapse if right column taller).

Float with clear (PC, wrap right column in a container to clear float).

Float with BFC (PC, use

overflow:hidden

or

display:flex

).

Table layout (PC, equal height).

Flex layout (mobile, equal height).

Positioning (requires out‑of‑flow).

Grid layout (modern browsers, recommended Flex).

<code>.float-margin-mixin (@leftWidth: 0) {
  .left { float: left; width: @leftWidth; }
  .right { margin-left: @leftWidth; }
}
</code>

<code>.float-clear-mixin (@leftWidth: 0) {
  .left, .right-fix { float: left; }
  .left { width: @leftWidth; }
}
</code>

<code>.float-bfc-mixin (@leftWidth: 0) {
  .left, .right-fix { float: left; }
  .left { width: @leftWidth; }
  .right { display: flex; /* or overflow:hidden */ }
}
</code>

<code>.table-mixin (@leftWidth: 0) {
  display: table; width: 100%;
  .left { display: table-cell; width: @leftWidth; }
  .right { display: table-cell; }
}
</code>

<code>.position-mixin (@leftWidth: 0) {
  position: relative;
  .left { position: absolute; width: @leftWidth; }
  .right { position: absolute; left: @leftWidth; right: 0; }
}
</code>

<code>.flex-mixin (@leftWidth: 0) {
  display: flex;
  .left { width: @leftWidth; }
  .right { flex: 1; }
}
</code>

<code>.gird-mixin (@leftWidth: 0) {
  display: grid;
  grid-template-columns: @leftWidth auto;
  grid-template-rows: repeat(2, 600px);
}
</code>

Multi‑Column Layout – Three‑Column

Demo: https://zzmwzy.gitee.io/css-test-online/dist/index.html

Requirement: left and center fixed width, right adaptive.

Vue Component (copy‑paste)

Link: https://github.com/Sympath/duojiUI/blob/master/src/packages/layout/muti-column-layout.vue

<code>.layout-tree-column-float-margin (@leftWidth: 0) {
  .left, .center { float:left; width:@leftWidth; }
  .right { margin-left:@leftWidth; }
}
</code>

<code>.layout-tree-column-float-bfc (@leftWidth) {
  .left, .center { float:left; width:@leftWidth; }
  .right { overflow:hidden; }
}
</code>

<code>.layout-tree-column-table (@leftWidth) {
  display: table; width:100%;
  .left, .center { display:table-cell; width:@leftWidth; }
  .right { display:table-cell; }
}
</code>

<code>.layout-tree-column-position (@leftWidth) {
  position: relative;
  .left, .center { width:@leftWidth; }
  .right { position:absolute; left:@leftWidth; right:0; }
}
</code>

<code>.layout-tree-column-flex (@leftWidth) {
  display:flex;
  .left, .center { width:@leftWidth; }
  .right { flex:1; }
}
</code>

<code>.layout-tree-column-gird (@leftWidth, @centerWidth, @leftHeight) {
  display:grid;
  grid-template-columns:@leftWidth @centerWidth auto;
  grid-template-rows:repeat(2,@leftHeight);
}
</code>

Multi‑Column Layout – Generic Multi‑Column

Demo: https://zzmwzy.gitee.io/css-test-online/dist/index.html

Requirement: two fixed columns with a central adaptive column.

Holy Grail Layout

<code>#layout {
  #three-column {
    .holy-grail(@leftWeight, @rightWeight){
      #center,#left,#right{float:left}
      #parent{padding-left:@leftWeight; padding-right:@rightWeight;}
      #left{margin-left:-100%;position:relative;left:-@leftWeight;}
      #right{margin-left:-@rightWeight;position:relative;right:-@rightWeight;}
    }
  }
}
</code>

Double‑Wing Layout

<code>#layout {
  #three-column {
    .threesome-wing(@leftWeight, @rightWeight){
      #center,#left,#right{float:left}
      #inner{margin-left:@leftWeight; margin-right:@rightWeight;}
      #left{margin-left:-100%}
      #right{margin-left:-@rightWeight;}
    }
  }
}
</code>

Equal‑Division Layout

Float Layout

<code>.float(@numberOfRow, @space: 0) {
  .parent{margin-left:-@space;}
  .parent>div{float:left; width:1/@numberOfRow; box-sizing:border-box; padding-left:@space;}
}
</code>

Table Layout

<code>.table(@space: 0) {
  .wrap{margin-left:-@space;}
  .parent{display:table; width:100%;}
  .parent>div{display:table-cell; border-left:@space solid #fff;}
}
</code>

Flex Layout

<code>.flex(@space: 0) {
  .parent{display:flex; flex:1; margin-left:-@space;}
  .parent>div{border-left:@space solid #fff;}
}
</code>

Final Summary

We have completed a systematic review of front‑end layout techniques. The knowledge network is now organized, providing ready‑to‑use Less mixins and code snippets for centering, multi‑column, and equal‑division layouts across desktop and mobile environments.

Online demos are available at https://zzmwzy.gitee.io/css-test-online/dist/index.html.

Vue components are hosted at https://github.com/Sympath/duojiUI/tree/master/src/packages/layout/.

The package is published to npm (duoji‑ui) for easy reuse.