grid-template-rows - 让两行像一个 div 一样排列在一起

Question

我有一个包含三个 div 的新故事模板：

• 一张照片
• 文章
• 一组相关链接。

在手机上，它们需要按顺序显示，而在桌面上，我希望它们以两列排列，照片和链接在一起，正文相对。 （我正在努力想出一种方法来使用 Flexbox 排序，同时仍然使两列的东西起作用。）

我一直在尝试在 CSS 网格中执行此操作。问题是照片和相关链接之间出现了不需要的间隙，因为新闻故事的长度（跨越两行）增加了每一个的高度。

默认情况下，左侧的行有 50% / 50% 的拆分，如下所示：

|-------|--------------|
| Photo | News item    |
|       |              |
|       | lorem ipsum  |
|-------| dolor sit    |
| Links | amet,        |
|       | foo, bar baz |
|       | hello world  |
|-------|--------------|

我想要它：

• 看起来像这样，链接直接在照片下方
• 无论照片高度、链接数、文章高度都能应对

|-------|--------------|
| Photo | News item    |
|-------|              |
| Links | lorem ipsum  |
|       | dolor sit    |
|       | amet,        |
|       | foo, bar baz |
|       | hello world  |
|-------|--------------|

这在 CSS 网格中是否可行？

grid-template-rows: minmax()

似乎没有帮助，我可以指定（自动，25％），但是一旦元素的大小发生变化，它就会中断。

masonry

选项听起来很有用，但这仅限于 Firefox。

Answer 1

您只需fit-content()或min-content即可实现您的目标。这会将容器缩小到内容的大小。在这种情况下，我将左上角的网格元素缩小为图像的大小，因此链接将始终位于其正下方。

请参阅下面的注释示例。如有任何问题，请发表评论。

.container {
  display: grid;
  grid-template-columns: min-content 1fr; /* fit-content(0) also works */
  grid-template-rows: min-content 1fr; /* fit-content(0) also works */
}
.article {
  grid-row: span 2; /* span the article to the two rows */
}

.container > div {
  border: 1px solid black;
}

img {
  display: block; /* remove descender */
}

<div class="container">
  <div class="photo">
   <img src='https://placekitten.com/200/200'>
  </div>
  <div class="article"><h3>News Item</h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="links">
    <a href='google.com'>Google</a>
    <a href='stackoverflow.com'>Stack Overflow</a>
    <a href='linux.org'>Linux</a>
  </div>
</div>