Question

我正在尝试使用css网格创建一个简单的布局（我认为），但是我找不到解决方法。

基本上，我想并排放置图像和文本。如果包含网格的宽度太小，则文本会移到图像下方，并且两者的宽度均为100％。

使用grid-template-columns: repeat(autofit, minmax(300px, 1fr))：Import-Csv

很容易

问题是当图像和文本并排时，我希望文本的大小是原来的两倍。我可以使用grid-template-columns: minmax(200px, 1fr) minmax(400px, 2fr)来做到这一点，但是文本永远不会在图像下方，而且我溢出了。

如果我在文字元素上使用grid-template-columns: repeat(autofit, minmax(200px, 1fr))和grid-column: span 2，我认为我可以做到，但是一旦文字出现，我就必须在图像上应用相同的span 2走到下面。

是否可以在CSS中定位网格行的最后一个元素？

我知道我可以使用媒体查询来更改grid-template-columns，但是我会尽可能使用纯CSS。基本上，是否有可能在网格中明确定义列，并且如果没有合适的位置使这些列消失？

还是我错过的另一种方式？

Answer 1

使用auto-fit或auto-fill，网格的所有列将始终具有相同的大小，因为浏览器将平均分配可用空间。使用网格，您将必须使用媒体查询来执行所需的操作，但有关此事……

我知道我可以使用媒体查询来更改grid-template-columns，但是我宁愿使用纯CSS。

...媒体查询是纯CSS，因此您不必担心。

有一个摘要：

.container {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 2fr;
  grid-gap: 24px;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.img {
  width: 100%;
}

<div class="container">
  <img class="img" src="http://via.placeholder.com/350x150">
   
  <div class="text">
    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
  </div>
</div>

Answer 2

使用Flexbox代替Grid将解决您想要实现的目标。

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

裁判：Flexbox Comprehensive guide

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

Working example

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

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

.flex-me p{
  flex: 2;
}

这是什么：

保留原始图像大小，但只允许其增大到与浏览器宽度一样大
确保文本始终占据图片flex: 2的两倍空间
如果图像尺寸大于定义为文本增长的空间，请换行到下一行flex-flow: wrap

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

2 个答案: