CSS Grid 完全指南

掌握 CSS Grid 布局，实现复杂的响应式页面设计。

#CSS #前端 #教程

CSS Grid 完全指南

CSS Grid 是现代网页布局的强大工具。

基础概念

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

网格线和网格区域

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

命名网格区域

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


.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

响应式布局

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

对齐方式

.container {
  justify-items: center;
  align-items: center;
  place-items: center;
}


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

实际示例

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}


.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
}

CSS Grid 让复杂布局变得简单！

评论