javascript - 使用 JavaScript 计算 CSS 网格中的行高

Question

我为我的新元素制作了一个小型 CSS 网格框架，但不久之后，我发现它有一些缺点。问题是，列不会占据一行的整个高度，这反过来又阻止我创建“ block 状”布局，并且在当前设置下我无法使用 CSS 实现此目的。

我已经用一些 JavaScript 解决了这个问题，但令我困扰的是，这段代码需要在页面加载后执行。这意味着如果要加载大量内容，布局会有点乱。

此外，我不太擅长 JavaScript，所以我不确定我是否正确地执行了此操作。

这里是源代码链接 CodePen

[注意] 我不想使用任何 JavaScript 库

Answer 1

您可以尝试使用 css table display property stack 并在需要时使用 javascript 作为对不支持的浏览器的回退。

  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;

http://codepen.io/anon/pen/LEniv

Browser compatibility