CSS 布局模式

 CSS 布局模式，有时简称为布局，是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。有以下几种形式：

• 块布局：用来布置文件。块布局包含以文档为中心的功能，例如 浮动元素或将其放置在多列上的功能。
• 行内布局：用来布置文本。
• 表格布局：用来布置表格。
• 定位布局：用来对那些与其他元素无交互的定位元素进行布置 。
• 弹性盒子布局：用来布置那些可以顺利调整大小的复杂页面。
• 网格布局：用来布置那些与一个固定网格相关的元素。

注意: 并非所有 CSS 属性 适用于所有布局模式。大多数属性适用于一到两种布局模式，如果将属性设置在参与其他（原文another,指三者或三者以上。）布局模式的元素上则会不起作用。

---

CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。

像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用`CSS`网格可能还是比`CSS`表格更容易布局。 例如，网格容器的子元素可以自己定位，以便它们像`CSS`定位的元素一样，真正的有重叠和层次。

基本示例

以下示例显示了一个三列轨道的网格，其中创建的行最小为100像素，最大为自动。条目使用线性定位放置在网格上。

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-row: 2 / 5;
  grid-column: 1;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

参考

CSS属性

grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
grid-row-start
grid-column-start
grid-row-end
grid-column-end
grid-row
grid-column
grid-area
grid-row-gap
grid-column-gap
grid-gap

CSS函数

repeat()
minmax()
fit-content()

CSS 数据类型

<flex>

术语表

• 网格（Grid）
• 网格线（Grid lines）
• 网格轨道（Grid tracks）
• 网格单元格（Grid cell）
• 网格区域（Grid areas）
• 网格间隙（Gutters）
• 网格轴（Grid Axis）
• 网格行（Grid row）
• 网格列（Grid column）

指南

• Basic concepts of Grid Layout
• Relationship of Grid Layout to other layout methods
• Layout using named grid lines
• Grid template areas
• Layout using named grid lines
• Auto-placement in CSS Grid Layout
• Box alignment in CSS Grid Layout
• CSS Grid, Logical Values and Writing Modes
• CSS Grid Layout and accessibility
• CSS Grid and progressive enhancement
• Realising common layouts using CSS Grid

外部资源

• Examples from Jen Simmons
• Grid by Example - a collection of usage examples and video tutorials
• Codrops Grid Reference
• Firefox DevTools CSS Grid Inspector
• CSS Grid Playground
• Grid Garden - 一个学习CSS 网格的游戏