对齐网格列项目（例如对齐：flex-start）

Question

<thing>
    <h2 class='heading'>
        HEADING
    </h2>

    <video-thing>
        <img src="https://placehold.it/1600x1100">
    </video-thing>

    <description>
        <p>TEXT</p>

        <button class='unfold'>Read more</button>
    </description>
</thing>

这是标记中事物的自然顺序。

在某个断点，我要这样做：

但是-我仍在从flex-box的世界中思考。我希望第一个“列”对齐flex-start ish。

请注意，较长的文本如何填充第一项中的空格，而第二个示例中的短文本则保持其一半。

CodePen

我猜测此对齐方式是“块轴”，例如：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

@media (min-width: 800px) {
    thing {
        display: grid;
        grid-template-columns: [message] 1fr [visual] 1fr;
        /* HERE */
    }
    .heading, description {
        grid-column: message;
    }
    video-thing {
        grid-column: visual;
        grid-row: 1/3;
    }
}

我也曾在网格区域工作过，但都达到了相同的目的。

我知道这与flex-box /完全不同]，但是我很确定我的建议是可能的-而且我还不知道如何说“网格”。 ; ）

UPDATE

@Temani Afif的建议启发了我-因此，这里有一些其他图像可以帮助说明它。

没有在父级上显式设置grid-template-rows-它会基于您为子级设置的任何网格行设置进行推断...因此，在这种情况下-将创建第三行'增长'，因为默认情况下，它们是“自动”的，但只有两者-不能。如果将1/4或span 100作为记录，它也将起作用。或者明确设置更多行并设置面积-或其他几种方法。

HEADING

Answer 1

您可能正在寻找此配置：