grid

grid-template-columns

grid-template-rows

grid-template-areas

grid-area

.parent div {
  display: inline-block;
  padding: 10px;
}

.child1 {
  background-color: red;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: child1;
}

.child2 {
  background-color: blue;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: child2;
}

.child3 {
  background-color: yellow;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: child3;
}

.child4 {
  background-color: green;
  /* 問題1. 各々の子要素に名前を指定してください */
  grid-area: child4;
}

.parent {
  width: 500px;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
  /* 問題2. 各々の子要素を条件に沿って、3行3列に配置してください */
  display: grid;
  grid-template-areas:
    'child1 child2 child3'
    'child1 child2 child4'
    'child1 child2 child4';
}


.parent div {
  display: inline-block;
  padding: 10px;
}

.child1 {
  background-color: red;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.child2 {
  background-color: blue;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.child3 {
  background-color: yellow;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.child4 {
  background-color: green;
  /* 問題1. 各々の子要素に名前を指定してください */
}

.parent {
  width: 500px;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
  /* 問題2. 各々の子要素を条件に沿って、3行3列に配置してください */
}


子要素のエリアの指定

grid-row,grid-column

子要素の開始位置と終了位置の指定

grid-auto-rows,-columns

暗黙的グリッドによる子要素の高さの指定

grid-auto-flow

子要素の配置方法の指定

スペースを埋めるように配置

演習問題

grid-template

グリッドの一括指定

CSS Gridレイアウトによるウェブページの設計方法を学びます。
グリッドシステムを用いてさまざまな要素の配置を学習し、現代のWebデザイン技術を習得します。

0からWebサイト制作のコツを学び、案件獲得までに必要なスキルをキャッチアップします。

Web制作コース

【応用編📚】高度なCSSテクニックを習得しよう

「Gridを使って、要素を自由自在に配置しよう」レッスンの総復習クイズです。