Ultimate Sass Grid!

In this example below you will see how to do a Ultimate Sass Grid! with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by caepenna, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright caepenna ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Sass Float Grid</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item one">
    1
  </div>
  <div class="item a">
    A
  </div>
  <div class="item b">
    B
  </div>
  <div class="item c">
    C
  </div>
  <div class="item d">
    D
  </div>
  <div class="item e">
    E
  </div>
  <div class="item f">
    F
  </div>
  <div class="item g">
    G
  </div>
  <div class="item h">
    H
  </div>
  <div class="item i">
    I
  </div>
  <div class="item j">
    J
  </div>
  <div class="item k">
    K
  </div>
  <div class="item l">
    L
  </div>
  <div class="item m">
    M
  </div>
  <div class="item n">
    N
  </div>
  <div class="item o">
    O
  </div>
  <div class="item p">
    P
  </div>
  <div class="item q">
    Q
  </div>
  <div class="item r">
    R
  </div>
  <div class="item s">
    S
  </div>
  <div class="item t">
    T
  </div>
  <div class="item u">
    U
  </div>
  <div class="item v">
    V
  </div>
  <div class="item w">
    W
  </div>
  <div class="subcontainer sub1">
    <div class="item x">
      X
    </div>
    <div class="item y">
      Y
    </div>
    <div class="subcontainer sub2">
      <div class="item z">
        Z1
      </div>
      <div class="item z">
        Z2
      </div>
    </div>
  </div>
  <div class="item">
    A
  </div>
  <div class="item">
    B
  </div>
  <div class="item">
    C
  </div>
  <div class="item">
    D
  </div>
  <div class="item">
    E
  </div>
  <div class="item">
    F
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/caepenna/ultimate-sass-grid-kXqyyJ */
html {
  font-size: 16px;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.container {
  width: calc(70% + 10rem);
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  overflow: auto;
  padding: 2rem;
}

.sub1 {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*6 + (6 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
  padding-right: 1rem;
  padding-left: 1rem;
}
@media screen and (max-width: 64rem) {
  .sub1 {
    width: calc( (100%/8 - 0.5rem)*6 + (6 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .sub1 {
    width: calc( (100%/4 - 0.5rem)*6 + (6 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.sub2 {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*4 + (4 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}
@media screen and (max-width: 64rem) {
  .sub2 {
    width: calc( (100%/8 - 0.5rem)*4 + (4 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .sub2 {
    width: calc( (100%/4 - 0.5rem)*4 + (4 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.item {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*4 + (4 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .item {
    width: calc( (100%/8 - 0.5rem)*4 + (4 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .item {
    width: calc( (100%/4 - 0.5rem)*4 + (4 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.one {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*1 + (1 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .one {
    width: calc( (100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .one {
    width: calc( (100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.c, .d, .e, .f, .g, .h {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*2 + (2 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .c, .d, .e, .f, .g, .h {
    width: calc( (100%/8 - 0.5rem)*2 + (2 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .c, .d, .e, .f, .g, .h {
    width: calc( (100%/4 - 0.5rem)*2 + (2 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.i, .j, .k, .l {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*3 + (3 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .i, .j, .k, .l {
    width: calc( (100%/8 - 0.5rem)*3 + (3 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .i, .j, .k, .l {
    width: calc( (100%/4 - 0.5rem)*3 + (3 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.p, .q {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*6 + (6 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .p, .q {
    width: calc( (100%/8 - 0.5rem)*6 + (6 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .p, .q {
    width: calc( (100%/4 - 0.5rem)*6 + (6 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.r, .s, .t, .u, .v, .w {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*1 + (1 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .r, .s, .t, .u, .v, .w {
    width: calc( (100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .r, .s, .t, .u, .v, .w {
    width: calc( (100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.x, .y {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*4 + (4 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .x, .y {
    width: calc( (100%/8 - 0.5rem)*4 + (4 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .x, .y {
    width: calc( (100%/4 - 0.5rem)*4 + (4 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

.z {
  display: block;
  float: left;
  width: calc( (100%/12 - 1rem)*6 + (6 - 1)*1rem);
  max-width: calc(100% - 1rem);
  margin-right: calc(1rem/2);
  margin-left: calc(1rem/2);
}
@media screen and (max-width: 64rem) {
  .z {
    width: calc( (100%/8 - 0.5rem)*6 + (6 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}
@media screen and (max-width: 48rem) {
  .z {
    width: calc( (100%/4 - 0.5rem)*6 + (6 - 1)*0.5rem);
    max-width: calc(100% - 0.5rem);
    margin-right: calc(0.5rem/2);
    margin-left: calc(0.5rem/2);
  }
}

@media screen and (min-width: 64rem) {
  .a {
    margin-left: calc((100%/12 - 1rem)*2 + (2 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (min-width: 64rem) and (max-width: 64rem) {
  .a {
    margin-left: calc((100%/8 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (min-width: 64rem) and (max-width: 48rem) {
  .a {
    margin-left: calc((100%/4 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (min-width: 64rem) {
  .b {
    margin-right: calc((100%/12 - 1rem)*2 + (2 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (min-width: 64rem) and (max-width: 64rem) {
  .b {
    margin-right: calc((100%/8 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (min-width: 64rem) and (max-width: 48rem) {
  .b {
    margin-right: calc((100%/4 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .i {
    margin-left: calc((100%/12 - 1rem)*1 + (1 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .i {
    margin-left: calc((100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .i {
    margin-left: calc((100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .k {
    margin-left: calc((100%/12 - 1rem)*1 + (1 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .k {
    margin-left: calc((100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .k {
    margin-left: calc((100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .o {
    margin-left: calc((100%/12 - 1rem)*2 + (2 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .o {
    margin-left: calc((100%/8 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .o {
    margin-left: calc((100%/4 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .p {
    margin-left: calc((100%/12 - 1rem)*1 + (1 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .p {
    margin-left: calc((100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .p {
    margin-left: calc((100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .q {
    margin-left: calc((100%/12 - 1rem)*1 + (1 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .q {
    margin-left: calc((100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .q {
    margin-left: calc((100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .q {
    margin-right: calc((100%/12 - 1rem)*2 + (2 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .q {
    margin-right: calc((100%/8 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .q {
    margin-right: calc((100%/4 - 0.5rem)*2 + (2 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .r {
    margin-left: calc((100%/12 - 1rem)*1 + (1 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .r {
    margin-left: calc((100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .r {
    margin-left: calc((100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 64rem) {
  .sub1 {
    margin-left: calc((100%/12 - 1rem)*1 + (1 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 64rem) {
  .sub1 {
    margin-left: calc((100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 64rem) and (max-width: 48rem) {
  .sub1 {
    margin-left: calc((100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .i {
    margin-left: calc((100%/12 - 1rem)*0.5 + (0.5 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .i {
    margin-left: calc((100%/8 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .i {
    margin-left: calc((100%/4 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .j {
    margin-left: calc((100%/12 - 1rem)*0.5 + (0.5 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .j {
    margin-left: calc((100%/8 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .j {
    margin-left: calc((100%/4 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .k {
    margin-left: calc((100%/12 - 1rem)*0.5 + (0.5 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .k {
    margin-left: calc((100%/8 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .k {
    margin-left: calc((100%/4 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .l {
    margin-left: calc((100%/12 - 1rem)*0.5 + (0.5 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .l {
    margin-left: calc((100%/8 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .l {
    margin-left: calc((100%/4 - 0.5rem)*0.5 + (0.5 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .o {
    margin-left: calc((100%/12 - 1rem)*0 + (0 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .o {
    margin-left: calc((100%/8 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .o {
    margin-left: calc((100%/4 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .p {
    margin-left: calc((100%/12 - 1rem)*0 + (0 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .p {
    margin-left: calc((100%/8 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .p {
    margin-left: calc((100%/4 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .q {
    margin-left: calc((100%/12 - 1rem)*0 + (0 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .q {
    margin-left: calc((100%/8 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .q {
    margin-left: calc((100%/4 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .q {
    margin-right: calc((100%/12 - 1rem)*0 + (0 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .q {
    margin-right: calc((100%/8 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .q {
    margin-right: calc((100%/4 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .r {
    margin-left: calc((100%/12 - 1rem)*0 + (0 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .r {
    margin-left: calc((100%/8 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .r {
    margin-left: calc((100%/4 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .sub1 {
    margin-left: calc((100%/12 - 1rem)*0 + (0 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .sub1 {
    margin-left: calc((100%/8 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .sub1 {
    margin-left: calc((100%/4 - 0.5rem)*0 + (0 - 1)*0.5rem + 1.5*0.5rem);
  }
}

@media screen and (max-width: 48rem) {
  .v {
    margin-left: calc((100%/12 - 1rem)*1 + (1 - 1)*1rem + 1.5*1rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 64rem) {
  .v {
    margin-left: calc((100%/8 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}
@media screen and (max-width: 48rem) and (max-width: 48rem) {
  .v {
    margin-left: calc((100%/4 - 0.5rem)*1 + (1 - 1)*0.5rem + 1.5*0.5rem);
  }
}

body {
  background-color: whitesmoke;
  padding: 1rem;
  font-weight: 300;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont,  "Roboto", "Helvetica Neue", Helvetica, sans-serif;
}

.container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.container * {
  background-color: rgba(51, 153, 255, 0.05);
  border: 1px solid rgba(51, 153, 255, 0.5);
  color: #39f;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.container > * > * {
  background-color: rgba(51, 204, 0, 0.05);
  border: 1px solid rgba(51, 204, 0, 0.5);
  color: #3c0;
}

.container > * > * > * {
  background-color: rgba(255, 0, 204, 0.05);
  border: 1px solid rgba(255, 0, 204, 0.5);
  color: #f0c;
}

Comments