How to achieve a block shape display by css grid

Question

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

Answer 1

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

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

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