时间戳

首页 > 解决方案 > CSS 网格结构

css - CSS 网格结构

问题描述

我在为模板制作网格时遇到了一些问题 在此处输入图像描述

我需要制作这样的网格，如果我可以做 3 列，这不是问题 - 但我不能......在移动设备上它有命令 block3 block1 block4 block2 block5 我该怎么做？我用 2 行实现了网格模板区域，例如网格模板区域：“block1 block3 block5”“block2 block4 block5”；但它不起作用，因为块 3 比块 1 更小......我将非常感谢任何帮助

添加了代码。包括手机版

codepen.io/PAKOT/pen/VwzLNJb

我需要网格区域中的中心块靠近顶部块（绿色和黄色一起在 1 列中） PS 似乎我发现，如果 smbd 在未来的网格模板区域中需要：“block1 block3 block5”“block1 block4 block5”“块 2 块 4 块 5";

标签： csstemplatesflexboxcss-grid

解决方案

看一下这个：

* {
  margin: none;
  padding: none;
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.columns {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

#col1 {
 width: 20%;
}

.smallBox {
  width: 90%;
  height: 45%;
  background: orange;
}

#col2 {
  width: 50%;
}

.topBox {
  width: 100%;
  height: 25%;
  background: orange;
}

.bigBox {
  width: 100%;
  height: 65%;
  background: orange;
}

#col3 {
  width: 30%;
}

.tallBox {
  width: 90%;
  height: 93%;
  background: orange;
}
  <div id="col1" class="columns">
    <div class="smallBox"></div>
    <div class="smallBox"></div>
  </div>
  <div id="col2" class="columns">
    <div class="topBox"></div>
    <div class="bigBox"></div>
  </div>
  <div id="col3" class="columns">
    <div class="tallBox"></div>
  </div>

使用弹性盒

推荐阅读