CSS Grid 布局初探

CSS Grid 是一个二维布局系统，专为用户界面设计。

基本概念

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

定义网格

/* 固定宽度 */
grid-template-columns: 200px 200px 200px;

/* 百分比 */
grid-template-columns: 25% 50% 25%;

/* fr 单位 */
grid-template-columns: 1fr 2fr 1fr;

/* repeat() 函数 */
grid-template-columns: repeat(3, 1fr);

/* auto-fill */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

间距

.container {
  grid-gap: 20px;
  /* 或分别设置 */
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}

网格项定位

.item {
  /* 跨越多列 */
  grid-column: 1 / 3;
  grid-column: span 2;
  
  /* 跨越多行 */
  grid-row: 1 / 4;
  grid-row: span 3;
}

命名区域

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

对齐

.container {
  /* 容器对齐 */
  justify-items: start | center | end | stretch;
  align-items: start | center | end | stretch;
  
  /* 整体对齐 */
  justify-content: start | center | end | space-between | space-around;
  align-content: start | center | end | space-between | space-around;
}

.item {
  /* 单项对齐 */
  justify-self: start | center | end | stretch;
  align-self: start | center | end | stretch;
}

隐式网格

.container {
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
  grid-auto-flow: row | column | dense;
}

实用示例

圣杯布局

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  min-height: 100vh;
}

图片画廊

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 10px;
}

网格系统

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
}

.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

浏览器支持

/* 渐进增强 */
.container {
  display: flex;
}

@supports (display: grid) {
  .container {
    display: grid;
  }
}