Question

我目前正在从事一个项目，我想在其中显示网格等信息，我想知道是否有更好的解决方案来实现我想要的行为。

所以我基本上想像在 CSS 中那样显示网格：

.comparer__data {
  display: grid;
  grid-template-areas: 
      ".   img   img   ."
      ".   title title ."
      "key value value value"
      "key value value value"
      "key value value value";
}

<div class="comparer">
  <div class="comparer__data">
    <img src="" alt="" class="comparer__image">
    <img src="" alt="" class="comparer__image">
    <h1 class="comparer__title">Title1</h1>
    <h1 class="comparer__title">Title2</h1>
    <h2 class="comparer__key">Key1</h2>
    <h2 class="comparer__key">Key2</h2>
    <h2 class="comparer__key">Key3</h2>
    <h3 class="comparer__value">Value1_1</h3>
    <h3 class="comparer__value">Value1_2</h3>
    <h3 class="comparer__value">Value1_3</h3>
    <h3 class="comparer__value">Value2_1</h3>
    <h3 class="comparer__value">Value2_2</h3>
    <h3 class="comparer__value">Value2_3</h3>
    <h3 class="comparer__value">Value3_1</h3>
    <h3 class="comparer__value">Value3_2</h3>
    <h3 class="comparer__value">Value3_3</h3>
  </div>
</div>

我想到的唯一解决方案是给他们每个人一个不同的区域编号并在模板中添加该编号，但这会导致很多冗余。像这样：

.comparer__data {
    display: grid;
    grid-template-areas: 
        ".    img1   img2   ."
        ".    title1 title2 ."
        "key1 value1 value4 value7"
        "key2 value2 value5 value8"
        "key3 value3 value6 value9";
 }

那么，有没有更好的方法用网格来做到这一点？我可以说网格不应该堆叠元素而是将它们放在下一个标记相同的单元格中吗？

谢谢，伊普塞隆

Answer 1

您的 grid-template-areas 可以保持原样，但您必须按区域对 HTML 元素进行分组。在 comparer__data 元素下，您可以有四种包装器：一种用于图像，一种用于标题，一种用于键，一种用于值。

Answer 2

您可以使用自动放置值和仅放置键的列放置来获得询问的结果。

唯一需要的技巧是使用伪作为填充物来保持空单元格为空

.comparer__data {
  display: grid;
  grid-template-areas: 
      "filler1   img1   img2   filler2"
      "filler1 title1 title2 filler2"
      "key    value  value  value"
      "key    value  value  value"
      "key    value  value  value";
   grid-auto-flow: dense;
}


.comparer__data:before {
    content: "f1";
    grid-area: filler1;
}
.comparer__data:after {
    content: "f2";
    grid-area: filler2;
}
.comparer__key {
    grid-column: key-start;
}

<div class="comparer">
  <div class="comparer__data">
    <div class="comparer__image1">IMAGE</div>
    <div class="comparer__image2">IMAGE</div>
    <h1 class="comparer__title1">Title1</h1>
    <h1 class="comparer__title2">Title2</h1>
    <h2 class="comparer__key">Key1</h2>
    <h2 class="comparer__key">Key2</h2>
    <h2 class="comparer__key">Key3</h2>
    <h3 class="comparer__value">Value1_1</h3>
    <h3 class="comparer__value">Value1_2</h3>
    <h3 class="comparer__value">Value1_3</h3>
    <h3 class="comparer__value">Value2_1</h3>
    <h3 class="comparer__value">Value2_2</h3>
    <h3 class="comparer__value">Value2_3</h3>
    <h3 class="comparer__value">Value3_1</h3>
    <h3 class="comparer__value">Value3_2</h3>
    <h3 class="comparer__value">Value3_3</h3>
  </div>
</div>

防止同名网格单元堆叠

2 个答案: