css grid

by gbos

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>


<div class="wrapper2">
    <div class="box a">AA</div>
    <div class="box b">BB</div>
</div>

<div class="wrapper3">
    <div class="box a">AAA</div>
    <div class="box b">BBB</div>
</div>
<hr>

<div class="wrapper4">
    <div class="box a">AA</div>
    <div class="box b">BB</div>
    <div class="box c">CC</div>
    <div class="box d">DD</div>
    <div class="box e">EE</div>
    <div class="box f">FF</div>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 2fr;
}

.box {
  background-color: #20262e;
  color: #fff;
  border-radius: 3px;
  padding: 20px;
  font-size: 14px;
}

.wrapper2 {
    margin: 10px 0;
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}


@media (min-width: 500px) {
    .wrapper2 {
        grid-template-columns: 1fr 3fr;
        
    }
   
}

.wrapper3 {
    display: grid;
    grid-template-columns: auto 100px;
    grid-column-gap: 10px;
    
}

.wrapper4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px 10px;
}
.wrapper4 .box {
    min-height: 100px;
    display: grid;
    justify-content: center;
    align-items: center;
}