JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="grid">
  <div class="carousel-back"></div>
  <div class="carousel-front"></div>
</div>

SCSS

* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

body {
  padding: 50px; // cu asta punem padding in jur la tot
}

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); // creem 5 coloane (care vor avea 6 linii)
  grid-template-rows: 80px 250px 120px 80px; // creem 4 randuri. observa ca primul si ultimul sunt mai mici. plus ca inaltimea la tot gridul e data din grid template-rows
  width: 100%;
}

// da inspect element pe grid. observa liniiletre care iti vor aparea si vei observa gridul ce l-am desenat azi

.carousel-back {
  grid-column-start: 1; // ce am povestit la lucru
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 5;
  background: orange;
}

.carousel-front {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
  background: purple;
}