Responsive grid with CSS Grids

Responsive grid with CSS Grids

by jayesh1511

HTML

<div id="parent-container">
  <div class="square" id="top-left"></div>
  <div class="square" id="top-right"></div>
  <div class="square" id="bottom-left"></div>
  <div class="square" id="bottom-right"></div>
  <div id="title">Microsoft</div>
</div>

CSS

.square {
  width: 38px;
  height: 38px;
  background: red;
  position: absolute;
}

#top-left {
  top: 0px;
  background: #F25022;
}

#top-right {
  background: #7FBA00;
  top: 0px;
  left: 41px;
}

#bottom-left {
  background: #00A4EF;
  top: 41px;
}

#bottom-right {
  background: #FFB900;
  top: 41px;
  left: 41px;
}

#parent-container {
  position: absolute;
  left: 100px;
  top: 100px;
}

#title {
  margin-left: 90px;
  font-size: 55px;
  font-weight: bold;
  color: #737373;
  margin-top: 10px;
}