主页 / 问题 / 1596543
Accepted
Роман
Asked:2024-10-13 05:04:36 +0800 CST2024-10-13 05:04:36 +0800 CST

网格模板，在一个父级中排列 12 个块

  • 772
grid-template:
        "a a b b b b b b b b " 110px
        "c c c c c c c c c c" 70px / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

在第二行中，您需要放置 10 个相同的块和图像。如果将每个图像grid-area: с;相互分配，它将重叠。并为每个图像分配一个唯一的区域。这有点贵，所有的块都在一个父级中......

按顺序，块a- 1 块（图像），c- 10 块（图像），b- 简单 div

在第一行中，该块a应占据 20%，其余的是块“b”。在第二行中，您需要排列 10 个图像，使它们均匀地占据整个宽度。

.container { 
  display: grid;
  gap: 10px;
  padding:10px;
  grid-template:
    "a a b b b b b b b b" 170px 
    "c3 c4 c5 c6 c7 c8 c9 c10 c11 c12" 70px;
}

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

.c:nth-child(3) {grid-area: c3}
.c:nth-child(4) {grid-area: c4}
.c:nth-child(5) {grid-area: c5}
.c:nth-child(6) {grid-area: c6}
.c:nth-child(7) {grid-area: c7}
.c:nth-child(8) {grid-area: c8}
.c:nth-child(9) {grid-area: c9}
.c:nth-child(9) {grid-area: c9}
.c:nth-child(11){grid-area: c11}
.c:nth-child(12){grid-area: c12}

.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}
<div class="container">
  <div class="b"></div>
  <div class="a"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
</div>

html

1 个回答

  1. Best Answer

    当这个问题出现时，我重新读了十遍，然后又读了五遍，然后等待评论，显然由于你的措辞和你想要实现的目标，没有人理解任何事情。但是，至少现在，当绘制你的愿望清单的代码出现时，那么，如果我理解正确的话，你想用更少的努力来绘制这样的东西吗？然后是这样的：

    .container { 
  display: grid;
  gap: 10px;
  padding:10px;
  grid-template-rows: 170px 70px;
  grid-template-columns: repeat(10, 1fr);
}
.container *:after {
  content:attr(class);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container > div {
  border: 1px solid;
}
.b {
  grid-area: 1 / 3 / 1 / 11;
}
.a {
  grid-area: 1 / 1 / 1 / 3;
}
    <div class="container">
  <div class="b"></div>
  <div class="a"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="c"></div>
</div>

    PS，我不知道你改变方块位置的目的是什么.a，.b但如果你想改变它们在容器中的位置，那么为了正确的重新定位，改变它们就足够了grid-area。

    • 1

相关问题