CSS Grid 布局的基本概念和常用属性？

.grid {
  display: grid;
  /* 定义列 */
  grid-template-columns: 200px 1fr 150px;  /* 固定+自适应+固定 */
  grid-template-columns: repeat(3, 1fr);    /* 三等分 */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自适应列数 */

  /* 定义行 */
  grid-template-rows: 100px auto 100px;

  /* 间距 */
  gap: 16px;
  row-gap: 16px;
  column-gap: 24px;

  /* 对齐 */
  justify-items: start | end | center | stretch;  /* 水平 */
  align-items: start | end | center | stretch;    /* 垂直 */
  justify-content: center | space-between | ...;  /* 整体水平 */
  align-content: center | space-between | ...;    /* 整体垂直 */
}

.item {
  /* 基于线定位 */
  grid-column: 1 / 3;    /* 从第1条线到第3条线（占2列）*/
  grid-row: 1 / 2;       /* 占第1行 */
  
  /* 跨越 */
  grid-column: span 2;   /* 跨2列 */
  
  /* 区域命名 */
  grid-area: header;     /* 放在名为 header 的区域 */
  
  /* 对齐 */
  justify-self: center;
  align-self: center;
}

grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1 比例 */

/* 固定3列 */
grid-template-columns: repeat(3, 1fr);

/* 自适应：容器足够宽时自动增加列数 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 每列最小200px，空间富余时等比增大 */

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }