CSS网格中的动态列数,宽度不同

Question

我正在尝试使用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.基本上,是否可以在网格中明确定义列,如果没有适合的位置,列会消失？

或者我可能以另一种方式错过了吗？

Answer 1

使用 Flexbox 而不是 Grid 将解决您想要实现的目标。

使用 Flexbox，您可以通过定义来指定每个元素应如何占用空间flex-grow。

我在这里创建了一个简单的示例：

.flex-me{ 
   display: flex; 
   flex-flow: wrap; 
}

.flex-me .thumb img{
   width: 100%;
}

.flex-me p{
  flex: 2;
}

其作用是：