<section class="grid-1">
  <div class="item-1">šŸ‘©šŸ½</div>
  <div class="item-2">šŸ‘—</div>
  <div class="item-3">šŸ‘•</div>
  <div class="item-4">šŸ‘”</div>
</section>
.grid-1 {
  grid-template-areas: 
                        "šŸ‘©šŸ½  šŸ‘©šŸ½  šŸ‘©šŸ½"
                        "šŸ‘—  šŸ‘—  šŸ‘•"
                        "šŸ‘”  šŸ‘”  šŸ‘”";
}

.happy-chappy {
  grid-template-areas: 	
                        "-   šŸ‘±    -"
                        "šŸ‘ˆ  šŸ‘•  šŸ‘‰  "
                        "-   šŸ‘–    -"
                        "-   šŸ‘Ÿ    -";
}

.prince-charles {
  grid-template-areas: 	
                        "  .	šŸ‘‘	.  "
                        "  šŸ‘‚	šŸ‘€	šŸ‘‚  "
                        "  .	šŸ‘ƒ	.  "
                        "  .	šŸ‘„	.  ";
}

.jackpot {
  grid-template-areas:  
                        "  šŸ’	 šŸ‰	  šŸ‰  "
                        "  šŸŠ	 šŸŠ	  šŸŠ  "  
                        "  šŸ‹	 šŸ‡	  šŸ  ";
}

body {
  padding-top: 20px;
  background: #f5f7f8;
}



.grid-1 {
  display: grid;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 80px 180px 80px;
  grid-gap: 20px;
}

/* items */

.grid-1 div {
  color: white;
  font-size: 20px;
  padding: 20px;
  }

/* specific item styles */

.item-1 {
  background: #b03532;
  grid-area: šŸ‘©šŸ½ ;
}
.item-2 {
  background: #33a8a5;
  grid-area: šŸ‘—;
}
.item-3 {
  background: #30997a;
  grid-area: šŸ‘•;
}
.item-4 {
  background: #6a478f;
  grid-area: šŸ‘” ;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.