📝 代码查看
使用runcode.html页面

2
查看次数
2025-10-30
创建时间
2025-10-30
最后更新
<div class="wrap">
  <div class="left-column">
    <div class="tile1"></div>
    <div class="tile2"></div>
    <div class="tile3"></div>
  </div>
  <div class="middle-column">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
  <div class="right-column">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>
:root {
  /* we define our variables in the :root selector to use them globally */
  --unit: 20vmin;
  --gutter: calc(0.02 * var(--unit));
  --tile-color: #A7D3EB;
}

.wrap {
  display: inline-flex;
}

.left-column, .middle-column, .right-column {
  display: flex;
  flex-direction: column;
}

.tile1 {
  width: calc(var(--unit) * 2);
  height: calc(var(--unit) * 0.33);
  margin: var(--gutter);
  background-color: var(--tile-color);
}

.tile2 {
  width: calc(var(--unit) * 2);
  height: calc(var(--unit) * 2 - var(--unit) * 0.33);
  margin: var(--gutter);
  background-color: var(--tile-color);
}

.tile3 {
  width: calc(var(--unit) * 2);
  height: var(--unit);
  margin: var(--gutter);
  background-color: var(--tile-color);
}

.tile {
  width: var(--unit);
  height: var(--unit);
  margin: var(--gutter);
  background-color: var(--tile-color);
}
暂无JavaScript代码

👁️ 实时预览