Grid test

by Rozina Szogyenyi

HTML

<html>
<head>

</head>

<body>

<div class="test-grid">

  <div class="col">
  
    <div class="title item">
      Title
    </div>
    <div class="credit item">
      Credit
    </div>
    <div class="price item">
      Price
    </div>
    <div class="decription item">
      Description
    </div>
    
  </div>
  
  <div class="col">
    <div class="validity item">
      Valid
    </div>
    <div class="buttons item">
      Buttons
    </div>
  </div>
</div>


</body>
</html>

CSS

.test-grid {
  display: grid;
  gap: 5px;
  grid-template-areas:
    'credit valid'
    'title title'
    'price price'
    'description description'
    'buttons buttons';
}

.test-grid .item {
  background: gray;
  height: 30px;
}

.col {
  display: contents;
}

.title {
  grid-area: title;
}

.credit {
  grid-area: credit;
}

.price {
  grid-area: price;
}
.validity {
  grid-area: valid;
}
.decription {
  grid-area: description;
}
.buttons {
  grid-area: buttons;
}