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

Posted 2023-03-07

【中文标题】使用 CSS 网格的两栏报纸布局

【英文标题】：Two-Column Newspaper Layout with CSS Grid

【发布时间】：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

【参考方案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://***.com/a/45200955/1625909