Column

Two Column Pattern

Block Two Column

• inline-block + inline-block.

Absolute Two Column

• absolute + margin-left: absolute element not in normal flow.
• 利用父元素 relative 与子元素 absolute 进行布局.

.div-1 {
  position: relative;
}

.div-1a {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
}

.div-1b {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}

Float Two Column

• float + float.
• float + margin-left: block element ignore float element, inline element surround float element.
• float + BFC.

.container {
  overflow: hidden; /* BFC creation */
}

.left {
  float: left;
  width: 60px;
  height: 60px;
}

.right {
  margin-left: 70px;
  overflow: hidden; /* BFC creation */
}

Fifty-fifty Two Column

.fifty-fifty-flex {
  display: flex;
  flex-wrap: wrap;
}

.fifty-fifty-flex > * {
  flex-grow: 1;
  flex-basis: 250px;
}

.fifty-fifty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Three Column Pattern

Absolute Three Column

Position .left and .right with absolute, add margin-left and margin-right to .middle:

<div class="container">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

<style>
  .container {
    position: relative;
  }

  .left,
  .right {
    position: absolute;
    width: 200px;
  }

  .middle {
    margin: 0 200px;
  }

  .left {
    left: 0;
  }

  .right {
    right: 0;
  }
</style>

Float Three Column

<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>

.left {
  float: left;
}

.right {
  float: right;
}

.middle {
  margin: 0 var(--right-width) 0 var(--left-width);
}

Negative Margin

For float element:

• Negative margin along the float direction: pull the float element in that direction.
• Negative margin opposite the float direction decrease the float area, causing adjacent elements to overlap the float element.

圣杯布局:

1. HTML: .middle first.
2. Padding: padding-left and padding-right to .container, min-width: 2 * (leftWidth + rightWidth) to .container.
3. Float: float: left to .left, .middle and .right (Currently, .middle in row 1, .left and .right in row 2).
4. Negative margin: margin-left: -100% to .left, margin-right: -rightWidth px to .right (Pull them up to same row with .middle).
5. Move: right: leftWidth px to .left (Adjust .left position).

<div class="container">
  <div class="middle"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

.container {
  padding: 0 200px 0 300px; /* padding-left = .left width, same to .right */
}

.container .middle {
  float: left;
  width: 100%;
  background-color: violet;
}

.container .left {
  position: relative;
  right: 300px;
  float: left;
  width: 300px;
  margin-left: -100%;
  background-color: darkblue;
}

.container .right {
  position: relative;
  float: left;
  width: 200px;
  margin-right: -200px;
  background-color: red;
}

Grid Three Column

Three column layout allows full-width content:

.container {
  display: grid;
  grid-template-columns: 1fr min(60ch, calc(100% - 64px)) 1fr;
  column-gap: 32px;
}

.container > * {
  grid-column: 2;
}

.full-bleed {
  grid-column: 1 / -1;
  width: 100%;
}

Multiple Column Pattern

Multiple column layout:

• columns:
  • <'column-width'> || <'column-count'>.
  • 分栏实际数目 = $\min(\frac{\text{width}}{\text{column-width}}, \text{column-count})$.
• column-width: auto | <length>, 期望分栏宽度.
• column-count: auto | <integer>, 期望分栏数目.
• column-gap: normal | <length-percentage>, 分隔间隙.
• column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>, 分隔线.
• column-rule-width (<line-width>): medium | thin | thick | <length>.
• column-rule-style (<line-style>): none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset.
• column-rule-color: currentcolor | <color>.
• column-span: none | all, 子元素宽度.
• column-fill: balance | balance-all | auto, 子元素分布.
• break-inside:
  • auto: Allows break.
  • avoid: Avoids break.

.three-column {
  column-gap: 1em;
  padding: 1em;
  column-count: 3;
}

.three-column > .last-child {
  column-span: all;
}