CSS FlexboxとGridのレイアウト練習問題

こちらの記事でFlexboxの練習ができるのでぜひ挑戦してみてください！

はじめに

divのサイズは以下のような設定で行なってください。

インフォメーション
divのサイズを変える場合があります。

index.css

* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 25%;
}

# background-colorはこちらのカラーになります。
  background-color: aqua;
  background-color: red;
  background-color: blue;
  background-color: green;
  background-color: yellowgreen;
  background-color: salmon;

1. FlexboxとGapを利用して箱同士の横と縦の幅を自在に操ってみましょう。

完成図

インフォメーション
箱の横幅は50px
縦幅は100px

答え

index.html

  <div class="flex">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
  </div>

index.css

* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
  width: 25%;
}

.a {
  background-color: aqua;
}

.b {
  background-color: red;
}

.c {
  background-color: blue;
}

.d {
  background-color: green;
}

.e {
  background-color: yellowgreen;
}

.f {
  background-color: salmon;
}

.flex {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-gap: 50px;
  row-gap: 100px;
  justify-content: center;
}

2. GridとGapを利用して箱同士の横と縦の幅を自在に操ってみましょう。

完成図

インフォメーション
箱の横幅は100px
縦幅は50px

答え

index.html

  <div class="grid">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    <div class="d"></div>
    <div class="e"></div>
    <div class="f"></div>
  </div>

index.css

* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
}

.a {
  background-color: aqua;
}

.b {
  background-color: red;
}

.c {
  background-color: blue;
}

.d {
  background-color: green;
}

.e {
  background-color: yellowgreen;
}

.f {
  background-color: salmon;
}

.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 25% 25% 25%;
  grid-column-gap: 100px;
  grid-row-gap: 50px;
  justify-content: center;
  margin: auto;
}

最後に

今回はGapというプロパティを使用して、デザインを行いました。
↓こちらが参考資料となります↓