CSS Grid 布局

基本用法

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 16px;
}

.item {
  grid-column: span 2;
}

常用属性

属性	说明
grid-template-columns	定义列
grid-template-rows	定义行
grid-gap	间距
grid-area	命名区域
justify-items	水平对齐
align-items	垂直对齐

响应式布局

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