如果我使用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用于頁腳 區域 這才是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>