grid

grid-auto-rows,-columns

grid-template-rows

grid-template-columns

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

.child1 {
  background-color: red;
}

.child2 {
  background-color: blue;
}

.child3 {
  background-color: yellow;
}

.child4 {
  background-color: green;
}

.child5 {
  background-color: orange;
}

.parent {
  gap: 10px;
  margin-bottom: 100px;
  grid-template-columns: 100px 100px;
  /* 問題1. 明示的グリッドで高さを指定してください */
  display: grid;
  grid-template-rows: 100px 100px;

  /* 問題2. 暗黙的グリッドで高さを指定してください */
  grid-auto-rows: 80px;
}


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

.child1 {
  background-color: red;
}

.child2 {
  background-color: blue;
}

.child3 {
  background-color: yellow;
}

.child4 {
  background-color: green;
}

.child5 {
  background-color: orange;
}

.parent {
  gap: 10px;
  margin-bottom: 100px;
  grid-template-columns: 100px 100px;
  /* 問題1. 明示的グリッドで高さを指定してください */

  /* 問題2. 暗黙的グリッドで高さを指定してください */
}


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

grid-row,grid-column

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

grid-auto-flow

子要素の配置方法の指定

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

演習問題

grid-template-areas

grid-area

子要素のエリアの指定

grid-template

グリッドの一括指定

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

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

Web制作コース

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

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