现代 CSS 布局技术回顾

1
.container {
2
  display: flex;
3
  justify-content: center;
4
  align-items: center;
5
}

1
.grid {
2
  display: grid;
3
  grid-template-columns: repeat(3, 1fr);
4
  gap: 1rem;
5
}

1
.card-container {
2
  container-type: inline-size;
3
}
4

5
@container (min-width: 400px) {
6
  .card {
7
    display: flex;
8
  }
9
}