js grid实现

Grid 布局基础

使用 CSS Grid 布局可以轻松创建复杂的网格结构。Grid 布局通过定义容器和子项来实现二维布局。

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

定义网格轨道

通过 grid-template-columns 和 grid-template-rows 定义网格的列和行。使用 fr 单位可以创建灵活的网格轨道。

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

网格间距

使用 grid-gap 或其单独属性 grid-row-gap 和 grid-column-gap 控制网格项之间的间距。

.grid-container {
  grid-gap: 20px;
  /* 或分开定义 */
  grid-row-gap: 10px;
  grid-column-gap: 30px;
}

网格项定位

通过 grid-column 和 grid-row 属性将网格项放置到特定位置。可以使用线号或 span 关键字。

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

命名网格线

为网格线命名可以提高代码的可读性，特别是在复杂的布局中。

.grid-container {
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}
.grid-item {
  grid-column: sidebar-start / content-end;
}

网格区域

使用 grid-template-areas 定义命名的网格区域，然后通过 grid-area 将项目分配到这些区域。

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

响应式网格

结合媒体查询创建响应式网格布局，适应不同屏幕尺寸。

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

自动填充和适应

使用 repeat() 函数与 auto-fill 或 auto-fit 自动创建尽可能多的轨道。

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

对齐网格内容

使用 justify-items、align-items、justify-content 和 align-content 控制网格项的对齐方式。

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

隐式网格

当网格项超出显式定义的网格时，会创建隐式网格。使用 grid-auto-rows 和 grid-auto-columns 控制隐式轨道大小。

.grid-container {
  grid-auto-rows: minmax(100px, auto);
}