CSS Grid and Flex layout tests #css #grid

codeswing.json

{
  "scripts": [],
  "styles": []
}

index.pug

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    title Document
  body
    .wraps
      p grid 6fr/6fr
      .grid.grid-1
        .box
        .box
      p grid 7fr/5fr
      .grid.grid-2
        .box
        .box
      p grid 5fr/7fr
      .grid.grid-3
        .box
        .box
      p grid 8fr/4fr
      .grid.grid-4
        .box
        .box
      p grid 4fr/8fr
      .grid.grid-5
        .box
        .box
      p grid 9fr/3fr
      .grid.grid-6
        .box
        .box
      p grid 3fr/9fr
      .grid.grid-7
        .box
        .box

script.js

‎‎​

style.scss

* {
  box-sizing: border-box;
}



body {
  min-height: 100vh;
  margin: 0 auto;

}
.wraps {
  padding: 40px;
}




.box {
  // width: 200px;
  width: 100%;
  height: 24px;
  border: 1px solid black;
  background: hsl(0,100%,90%);
}
.grid {
  display: grid;
  // grid-template-areas: "a b";
  max-width: 1280px;
  margin: 0 auto;

}
p {
  margin-top: 40px;
}

$columns: (
  "1": 6fr 6fr,
  "2": 7fr 5fr,
  "3": 5fr 7fr,
  "4": 8fr 4fr,
  "5": 4fr 8fr,
  "6": 9fr 3fr,
  "7": 3fr 9fr,
);

@each $key, $value in $columns {
  .grid-#{$key} {
    grid-template-columns: $value;
  }
}