CSS Grid 网格布局速查表

该页面提供了一个CSS Grid布局的视觉速查表，包括网格容器、网格项目的核心属性和实用布局案例。

网格容器

属性	值	描述
`display`	`grid`	将元素定义为网格容器
`grid-template-columns`	`100px 1fr`	定义列的宽度
`grid-template-rows`	`100px 1fr`	定义行的高度
`grid-template-areas`	`header header` `sidebar main` `footer footer`	通过命名区域来定义网格
`grid-column-gap`	`10px`	定义列之间的间隙
`grid-row-gap`	`10px`	定义行之间的间隙
`grid-gap`	`10px 20px`	同时定义行和列之间的间隙
`justify-items`	`start`	定义网格项目在网格单元格内的水平对齐方式
`align-items`	`start`	定义网格项目在网格单元格内的垂直对齐方式
`justify-content`	`start`	定义整个网格在网格容器内的水平对齐方式
`align-content`	`start`	定义整个网格在网格容器内的垂直对齐方式

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

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

.container {
  display: grid;
  align-items: center;
}

.container {
  display: grid;
  justify-items: center;
}