SOURCE

  <span>foo</span>
<div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
</div>
<span>bar</span>

#container{
  display:  inline-grid;
  width: 550px;
  height: 220px;
  /* grid-template-columns: 100px 100px 100px 100px 100px; */
  /* grid-template-rows: 100px 100px; */
  gap: 10px 10px;
  /* justify-items: center;
    align-items: center; */
    /* place-items:center center; */
    /* justify-content: center; */
    /* justify-items: center; */
  /* grid-template-areas:  */
  /* 'a b d e g'
  'a c d f g'
  ; */
  grid-template:
  'a b d e g' 100px
  'a c d f g' 100px / 2fr 1fr 1fr 1fr 1fr;
}

.item {
    /* width: 50px;
    height: 50px; */
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
   grid-area: a;
}

.item-2 {
  background-color: #f68f26;
   grid-area: b;
   /* justify-self: left; */
}

.item-3 {
  background-color: #4ba946;
   grid-area: c;
}

.item-4 {
  background-color: #0376c2;
   grid-area: d;
}

.item-5 {
  background-color: #c077af;
   grid-area: e;
}

.item-6 {
  background-color: #f8d29d;
   grid-area: f;
}


.item-7 {
  background-color: #b5a87f;
   grid-area: g;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}