时间戳

首页 > 解决方案 > CSS网格 - 不同屏幕+背景上的可变布局位置

css - CSS网格 - 不同屏幕+背景上的可变布局位置

问题描述

设计师的意图是在桌面上的某些元素下和移动设备上的另一组元素下具有背景颜色。

网格内网格。桌面布局如图和 Liveweave 操场上所示。对于移动设备，设计师希望“I”块（左下）都低于“G”块（右中），并且所有元素都将具有背景颜色，而不仅仅是 AH 块。由于背景颜色，我将 AH 块包裹在另一个元素中，因此命名块不在同一级别。

实际实现：https ://liveweave.com/jxIgSV

演示：

.wrapper {
  display: grid;
  grid-template-columns: auto 36.66667%;
  gap: 35px;
}

.fieldset {
  background-color: #f8f8f8;
  border-radius: 4px;
  display: grid;
  grid-column: 1 / span 2;
  grid-template-columns: 24% 40% 7.5% 26%;
  grid-template-areas: "a b e f" "a c e g" "a d . g" ". h . .";
  gap: 6px 10px;
  grid-auto-rows: minmax(39px, auto);
}

.f {
  border: 1px solid #000;
  background: red;
}

.f-a {
  grid-area: a;
}

.f-b {
  grid-area: b;
}

.f-c {
  grid-area: c;
}

.f-d {
  grid-area: d;
}

.f-e {
  grid-area: e;
}

.f-f {
  grid-area: f;
}

.f-g {
  grid-area: g;
}

.f-h {
  grid-area: h;
}


/*.f-i { grid-area: i; }
    .f-j { grid-area: j; }*/
<div class="wrapper">
  <div class="fieldset">
    <div class="f f-a">A</div>
    <div class="f f-b">B</div>
    <div class="f f-c">C</div>
    <div class="f f-d">D</div>
    <div class="f f-e">E</div>
    <div class="f f-f">F</div>
    <div class="f f-g">G</div>
    <div class="f f-h">H</div>
  </div>
  <div class="f f-i">I</div>
  <div class="f f-j">J</div>
</div>

网格内网格

我想不出一种方法如何仅为网格子集的子集提供背景颜色。我的目标是一个清晰的方法，我可以在某种程度上认为绝对定位的伪元素位于网格之下，因为它的子元素占据的空间有些相同。

标签： csscss-grid

解决方案

推荐阅读