CSS Grid

by Kirubel Girma

HTML

<div class="grid">
  <div class="name">Name</div>
  <div class="score">Score</div>
  <div class="skills">Skills</div>
  <div class="chart">Chart</div>
</div>

CSS

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: 
  "name" 
  "score" 
  "skills" 
  "chart";
  background-color: antiquewhite;
  color: whitesmoke;
}

@media only screen and (min-width: 500px) {
  .grid {
    grid-template-areas:
    "name skills" 
    "score skills"
    "chart chart";
  }
}

@media only screen and (min-width: 800px) {
  .grid {
    grid-template-areas:
    "name score skills" 
    "chart chart skills";
  }
}

.grid > div {
  padding: 20px;
}

.name {
  background-color: #f44336;
  grid-area: name;
}

.score {
  background-color: #2196f3;
  grid-area: score;
}

.skills {
  background-color: #4caf50;
  grid-area: skills;
}

.chart {
  background-color: #607d8b;
  grid-area: chart;
}