How to achieve a block shape display by css grid

If I use a css grid, I have have a content area like

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

But I want to have something like below, grid limitations doesn’t aloow this, but any other way to implement this ?

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

This is a simple card on UI where I’m using

• a is for description area
• b is for image area
• c is used for footer
  area

This is really the purpose of float. Here's a simple demo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

I wouldn't use template areas for this, but just used them to get closer to your original suggestion.