grid

grid-auto-flow

grid-template-columns

grid-template-rows

grid-row,grid-column

.parent1 div,
.parent2 div {
  display: inline-block;
  padding: 10px;
}

.parent1 {
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 問題1. ばらばらに配置されているアイテムを、スペースを埋めるように横方向に配置してください */
  grid-auto-flow: dense;
}

.parent2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 問題2. アイテムを、スペースを埋めるように縦方向に配置してください */
  grid-auto-flow: column dense;
}

.child1 {
  background-color: red;
  grid-column: 1 / 4;
}

.child2 {
  background-color: blue;
  grid-column: 2 / 3;
}

.child3 {
  background-color: yellow;
}

.child4 {
  background-color: green;
  grid-column: 1 / 2;
}

.child5 {
  background-color: red;
  grid-column: 1 / 4;
}

.child6 {
  background-color: blue;
  grid-column: 2 / 3;
}

.child7 {
  background-color: yellow;
}

.child8 {
  background-color: green;
  grid-column: 1 / 2;
}


.parent1 div,
.parent2 div {
  display: inline-block;
  padding: 10px;
}

.parent1 {
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 問題1. ばらばらに配置されているアイテムを、スペースを埋めるように横方向に配置してください */
}

.parent2 {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 問題2. アイテムを、スペースを埋めるように縦方向に配置してください */
}

.child1 {
  background-color: red;
  grid-column: 1 / 4;
}

.child2 {
  background-color: blue;
  grid-column: 2 / 3;
}

.child3 {
  background-color: yellow;
}

.child4 {
  background-color: green;
  grid-column: 1 / 2;
}

.child5 {
  background-color: red;
  grid-column: 1 / 4;
}

.child6 {
  background-color: blue;
  grid-column: 2 / 3;
}

.child7 {
  background-color: yellow;
}

.child8 {
  background-color: green;
  grid-column: 1 / 2;
}


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

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

grid-auto-rows,-columns

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

子要素の配置方法の指定

演習問題

grid-template-areas

grid-area

子要素のエリアの指定

grid-template

グリッドの一括指定

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

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

Web制作コース

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

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