卡片布局.md

卡片布局

基本结构如下：

<div class="cards">
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
  <div class="cards__item"></div>
</div>

基本样式如下：

html,
body {
  height: 100%;
  margin: 0;
}

.cards {
  height: 100%;
}

.cards__item {
  background: pink;
  height: calc(33.33% - 16px);
  width: calc(33.33% - 16px);
  margin: 8px;
  border-radius: 0.25rem;
}

.cards__item:nth-child(odd) {
  background: plum;
}

这里的卡片布局，其实根据你想要控制元素的占据所决定，本示例每行、每列各占三个元素。

使用 absolute

.cards {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.item {
  /* ... */
  float: left;
  height: 33.33%;
  width: 33.33%;
}

查看效果

Flex

display: flex 设置容器成 Flex 布局，flex-wrap: 设置元素可换行。

.cards {
  display: flex;
  flex-wrap: wrap;
}

查看效果

Grid

grid-template-columns 控制元素的列占据，grid-template-rows 控制元素的行占据，它们都用于父元素。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

查看效果