將自動擴展的“手風琴式”CSS網格行行為復制為列

米歇爾·巴克寫過“用CSS網格解決一個棘手的布局問題”。她的代碼在垂直方向上很好用，但是我在水平方向上很難適應。

頂部/底部版本在視窗變窄時(或者當您添加更多文本時，或者當字體大小增加時，等等),成功地縮放其文本的網格行。).但是，當調整左/右版本的視口、文本或字體大小時，我不知道如何描述發生的情況:

視口頂部對齊底部對齊右對齊嘗試左對齊嘗試廣泛的 enter image description here Text-positioned at lower-left of media, with more x-axis overlap 狹窄的 Bottom-aligned text at a narrow viewport My attempt at right-aligned text at a narrow viewport