网站通常在多个列中显示内容（如杂志或 一份报纸）。

一个示例代码

HTML 有几个语义元素来定义网页的不同部分：

有四种不同的技术可以创建多列布局。每种技术有其优点和缺点：

• CSS 框架
• CSS 浮动布局
• CSS 弹性框布局
• CSS 网格布局

CSS 浮动布局-Float Layout

使用 CSS 属性执行整个 Web 布局是很常见的。浮动很容易学习 - 只需要记住和属性是如何工作的。弊：浮动元素与文档流相关联，这可能会造成损害灵活性。

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}

CSS 浮动布局-Float Layout

CSS 弹性框布局-Flexbox Layout

使用弹性框可确保元素在页面布局时可以必须适应不同的屏幕尺寸和不同的显示设备。

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

CSS 弹性框布局-Flexbox Layout

CSS 网格布局

CSS 网格布局模块提供了一个基于网格的布局系统，包括行和列， 使设计网页变得更加容易，而无需使用浮动和定位。