CSS Grid 入门笔记

CSS Grid布局是一个二维布局系统，它能够处理列和行，因此非常适合创建复杂的网页布局。下面是一个系统的CSS Grid布局教程，从基础到高级应用。

基础

启用Grid布局

要在一个容器上启用Grid布局，你需要将display属性设置为grid或inline-grid。

.container {
  display: grid;
}

定义列和行

使用grid-template-columns和grid-template-rows来定义容器中的列和行。

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

放置项目

可以使用grid-column和grid-row来放置网格项目。

.item {
  grid-column: 1 / 3;
  grid-row: 1;
}

间隙

gap属性（也可以分别用row-gap和column-gap）定义了项目之间的间隙。

.container {
  display: grid;
  gap: 10px;
}

对齐和定位

对齐项目

使用justify-items、align-items、justify-content、和align-content来对齐项目和内容。

.container {
  display: grid;
  justify-items: start;
  align-items: end;
}

对齐单个项目

使用justify-self和align-self对单个项目进行对齐。

.item {
  justify-self: center;
  align-self: center;
}

高级布局

命名线

可以给网格线命名，这样更容易引用它们。

.container {
  display: grid;
  grid-template-columns: [start] 100px [middle] 200px [end];
}

区域模板

使用grid-template-areas定义一个区域模板，并通过grid-area将项目放置到指定区域。

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

响应式布局

可以使用媒体查询来创建响应式的网格布局。

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

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

自动填充和最小最大尺寸

使用auto-fill或auto-fit和minmax函数可以创建灵活的网格布局。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

实际应用

网格与Flexbox混合

你可以在网格项目内部使用Flexbox布局，以便于处理更复杂的布局需求。

.item {
  display: flex;
}

网格嵌套

在网格中嵌套另一个网格来创建复杂的布局。

.sub-container {
  display: grid;
}

结语

CSS Grid布局提供了强大的布局能力，特别适用于复杂的页面布局设计。它的真正强大之处在于与其他CSS布局技术（如Flexbox）的配合使用，以及它在创建响应式设计方面的能力。随着实践的深入，你将能够用Grid解决更多布局问题，创建出更加精致和复杂的网页设计。记住，实践是掌握Grid布局的关键，尝试使用它来构建实际的项目将极大地提升你的技能。