世界一わかりやすいグリッドデザイン入門

前提知識

• HTMLの基礎
• CSSの基礎

概要

複雑そうなグリッドデザインもコツを掴めれば簡単に実装できます！
今回はそんなグリッドデザイン超入門初心者向け講座です！！

早速やってみよう

とりあえずindex.htmlとstyle.cssを作成

最初は超入門

index.html

  <div class="oya">
    <div class="red-box"></div>
    <div class="blue"></div>
  </div>

style.css

body {
  margin: 0;
}
.oya {
  display: grid;
  grid-template-rows: 400px;
  grid-template-columns: 50% 50%;
  width: 100%;
}

.red-box {
  background-color: red;
}
.blue-box {
  background-color: blue;
}

この場合columnが横に50%ずつ
rowが縦に400pxって感じになります！

ちょっと応用

index.html

<div class="oya">
    <div class="red-box"></div>
    <div class="blue-box"></div>
    <div class="yellow-box"></div>
    <div class="green-box"></div>
  </div>

style.css

.oya {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 200px 100px;
}

.red-box {
  background-color: red;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  /* 1から2  */
}
.blue-box {
  background-color: blue;
  grid-row: 2/3;
  grid-column: 1/2;
  /* rowは2から３、columnは1から2 */
}

.yellow-box {
  background-color: yellow;
  grid-row: 1/3;
  grid-column: 2/3;
  /* rowは1から3, columnは2から３  */
}

.green-box {
  background-color: green;
  grid-row: 3/4;
  grid-column: 1/3;
  /* rowは3から4
  columnは1から3 */
}

まず始めに親要素に
display: gredを宣言します。
そのあとrowとcolumnの配置をそれぞれ決めていきます！

あとは簡単！
grid-rowとgrid-columnで各要素の場所を指定するだけです！

今回は超入門と言うことで簡単な構成でしたがもっと応用すると複雑なデザインができると思います！

お疲れ様でした！