九宫格布局

IW

⌘ K

IW

⌘ K

‌
‌
‌
‌

使用flex布局，设置每个子元素的width为33%

scss

.flex {
  display: flex;
  /*  height: 30rem; */
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  /*   background-color: var(--color-bg); */
  flex-wrap: wrap;
  gap: 0.5%;
  border: var(--color-border) dashed 1px;
}
.item {
  width: 33%;
  aspect-ratio: 1 / 1;
  border: var(--color-border) dashed 1px;
  background-color: var(--color-bg-primary);
}

‌
‌
‌
‌

使用flex布局，设置每个子元素的width为33%

scss

.flex {
  display: flex;
  /*  height: 30rem; */
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
  /*   background-color: var(--color-bg); */
  flex-wrap: wrap;
  gap: 0.5%;
  border: var(--color-border) dashed 1px;
}
.item {
  width: 33%;
  aspect-ratio: 1 / 1;
  border: var(--color-border) dashed 1px;
  background-color: var(--color-bg-primary);
}

1

2

3

4

5

6

7

8