【发布时间】：2018-08-02 07:35:04
【问题描述】：
我正在尝试使用 css 网格创建一个简单的（我认为）布局，但我找不到如何去做。
基本上，我希望将图像和文本并排放置。当包含网格的宽度太小时，文本会低于图像，并且都占用 100% 的宽度。
grid-template-columns: repeat(autofit, minmax(300px, 1fr)) 很容易做到这一点：https://codepen.io/anon/pen/vajYZM
问题是当图像和文字并排时，我希望文字是两倍大。我可以用grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr) 做到这一点，但是文本永远不会低于图像，并且我有溢出。
如果我在文本元素上使用grid-template-columns: repeat(autofit, minmax(200px, 1fr)) 和grid-column: span 2，我想我可以做到这一点，但是一旦文本位于下方，我就必须在图像上应用相同的跨度 2。
是否可以在 CSS 中定位网格行的最后一个元素？
我知道我可以使用媒体查询来更改grid-template-columns，但我宁愿尽可能使用纯 CSS。基本上，是否可以在网格中明确定义列，如果它们没有合适的位置，它们会消失吗？
或者是否有可能以我错过的另一种方式？
【问题讨论】：
-
媒体查询是纯 CSS，没有它或JavaScript，你无法实现你所描述的行为。