如何展平嵌套的div以在CSS网格中显示它们? [英] How to flatten nested divs to display them in a CSS grid?

问题描述

我从一个应该是两列宽的对象生成一个表(带有vue.js).每个列都来自对象的键和值.这等效于以下实际HTML:

I generate a table (with vue.js) from an object which is supposed to be two columns wide. Each of the columns comes from the key and value of the object. This is equivalent to the following actual HTML:

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

我使用CSS网格将这些div格式化为2x2网格，我希望是这样

I use CSS grid to format these div into a 2x2 grid, which I expected to be

this is something long on the first row | short 1st row
wazaa 2nd row                           | wazii 2nd row

执行此操作的代码:

#table {
  display: grid;
  grid-template-columns: auto 1fr;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

结果不是我期望的结果:最深的两个div的行为就像它们应该在grid显示器之外:它们堆叠在一起.

The result is not the one I expect: the two deepest div behave like they should outside of a grid display: they stack on top of each other.

我希望他们继承网格行为:在进行时根据列模板进行对齐.如何实现?

推荐答案

网格属性不适用于您的内容div，因为这些div不在范围内.

Grid properties aren't applying to your content divs because these divs are out-of-scope.

网格格式仅限于父子关系.这意味着网格容器始终是父级，而网格项目始终是子级.子代以外的网格容器的后代不属于网格布局，并且不接受网格属性.

Grid formatting is limited to the parent-child relationship. This means that a grid container is always the parent and a grid item is always the child. Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

因为您的内容div比网格容器(#table)低两级，使它们成为子代而不是子代，所以它们不是网格项目，并且不接受网格属性.

Because your content divs are two levels down from the grid container (#table), making them grandchildren not children, they are not grid items and will not accept grid properties.

更多详细信息:网格属性不适用于网格容器内的元素

上面的规则有一些例外，但是它们没有太多或任何浏览器支持.

There are exceptions to the rule above, but they don't have much or any browser support.

display: contents包含在此帖子的另一个答案中.它使元素可以被父元素忽略为包含块，因此父元素会将其子元素识别为普通子元素.但是目前，此方法实际上已无法用于生产目的，因为它具有对浏览器的支持不足.

display: contents is covered in another answer to this post. It enables an element to be ignored as a containing block by the parent, so the parent will recognize its grandchildren as normal children. But for now this method is effectively useless for production purposes, as it has weak browser support.

在这种情况下，更合适的解决方案是display: subgrid，它使网格容器的子代超出子代(即，网格项的子代)之外的范围，可以尊重容器的行.但是此功能不支持浏览器.

The more appropriate solution in this case would be display: subgrid, which enables the descendants of a grid container beyond the children (i.e., the children of grid items) to respect the lines of the container. But this feature has no browser support.

更多详细信息:将网格项目的内容放置在主容器中(子网格功能)

如果您想要一个纯CSS解决方案，也许将grid和flex结合使用会有所帮助.

If you want a pure CSS solution, maybe a combination of grid and flex can help.

这是一个一般概念.无需更改HTML.

Here's a general concept. No changes to the HTML.

#table {
  display: grid;
  grid-template-columns: 1fr;
}

#table > div {
  display: flex;
}

#table > div > div {
  flex: 1;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

这篇关于如何展平嵌套的div以在CSS网格中显示它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！