css grid play 01

just learning

by Andy Bulka

HTML

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

CSS

/* body {
  padding: 20px;
  font-family: Helvetica;
}
 */
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.box {
  border: 2px solid red;
  border-radius: 5px;
  margin: 4px;
  background-color: cyan;
  width: 3em;
  height: 3em;
}