如何通过css网格实现块状形状显示

Question

如果我使用 CSS 网格，我有一个像这样的内容区域

grid-template-areas:             
 "b b a a"            
 "b b a a"            
 "b b a a"  
 "b b a a"          
 "c c c c";

但是我想要像下面这样的东西，网格限制不允许这样做，但是还有其他方法可以实现这个吗？

grid-template-areas:             
 "b b a a"            
 "b b a a"            
 “a a a a"  
 “a a a a"          
 "c c c c";

这是我正在使用的 UI 上的一张简单卡片

• a 为描述区域
• b 代表图像区域
• c 用于页脚 面积

Answer 1

这确实是

float

的目的。这是一个简单的演示：

* {margin: 0; padding: 0; box-sizing: border-box;}

section {
  display: grid;
  grid-template: 3fr 1fr / 500px;
  grid-template-areas:
   "a"
   "c";
  gap: 20px;
  margin: 40px;
}

article {
  grid-template-areas: a;
}

img {
  float: left;
  padding: 0 20px 20px 0;
  width: 50%;
}

footer {
  padding: 20px; 
  background: #e7e7e7;
  grid-template-areas: c;
}

<section>
  <article>
    <p><img src="http://placehold.it/200x200" >Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis, ipsum dolor sit amet consectetur adipisicing elit. Nihil voluptatibus, beatae in saepe ullam laborum atque nulla quam commodi vitae ab rerum itaque quaerat deleniti ut eligendi veniam optio officiis.</p>
  </article>
  <footer>This is the footer.</footer>
</section>

我不会为此使用模板区域，而只是使用它们来更接近您最初的建议。