使用 CSS 网格的两栏报纸布局答案

【问题标题】：Two-Column Newspaper Layout with CSS Grid使用 CSS 网格的两栏报纸布局
【发布时间】：2021-03-19 01:15:06
【问题描述】：

我有 CSS 网格来生成两列布局。但问题是它不是每列中的顶部对齐内容。

例如，在第二列中，最后一个元素应该与另一个第二列元素顶部对齐但向上对齐。

body>div {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  /* https://codepen.io/maddesigns/pen/oZGWRN */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}

body>div>div:nth-of-type(1) {
  height: 300px;
}

body>div>div:nth-of-type(2) {
  height: 100px;
}

body>div>div:nth-of-type(3) {
  height: 200px;
}

<div style="">
  <div style="background:red">
    1
  </div>
  <div style="background:green;">
    2
  </div>
  <div style="background:yellow">
    3
  </div>
  <div style="background:pink">
    4
  </div>
</div>

我无法在此布局中使用 flex，因为我想在不定义容器高度的情况下实现此布局。 column-count:2 会在不定义容器高度的情况下工作，但我不能使用 div 重新排序。

所以我使用 CSS 网格，因为 div 重新排序仍然可用（例如/即order:–1; 效果很好）并且它会自动划分要放入两列中的每一列。

【问题讨论】：

参见此处：css-tricks.com/… - 对于没有 CSS Grid 的替代解决方案，请参见此处：css-tricks.com/guide-responsive-friendly-css-columns

标签： css css-grid newspaper3k

【解决方案1】：

网格完全按照预期运行，以保持秩序和对称。我可以建议并排使用 2 个网格来实现您正在寻找的内容。这是我为证明这一点而制作的一个示例：

.left{
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  width: 50%;
  float: left;
  /* https://codepen.io/maddesigns/pen/oZGWRN */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}

.right{
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
   width: 50%;
  /* https://codepen.io/maddesigns/pen/oZGWRN */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow */
}

.left>div:nth-of-type(1) {
  height: 300px;
}

.left>div:nth-of-type(2) {
  height: 100px;
}

.right>div:nth-of-type(1) {
  height: 200px;
}

.right>div:nth-of-type(2) {
  height: 50px;
}

<div class="left" style="">
  <div style="background:red">
    1
  </div>
  <div style="background:green;">
    2
  </div>
</div>
  
<div class="right">
  <div style="background:yellow">
    3
  </div>
  <div style="background:pink">
    4
  </div>
</div>

【讨论】：

谢谢。这看起来很棒。可悲的是，这不会让我在左右之间重新排序项目。例如，我需要 JavaScript 将 3 移动到位置 1。

【解决方案2】：

事实上，在能够自动缩小差距的 CSS 技术问世之前，CSS 通常没有解决方案。像这样的事情可能需要重排文档，所以我不确定它会有多大用处或效率。

来源：https://stackoverflow.com/a/45200955/1625909

【讨论】：