.child1 {
  background-color: #f08080;
}
.child2 {
  background-color: #48d1cc;
}
.child3 {
  background-color: #98fb98;
}
.child4 {
  background-color: #ee82ee;
}
.child5 {
  background-color: #ffa500;
}
.child6 {
  background-color: #ffff00;
}
.child7 {
  background-color: #cd5c5c;
}
.child8 {
  background-color: #00ffff;
}
.parent {
  display: grid;
  /* 問題1. 子要素を2行4列で配置し、要素間の余白を指定しよう */
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: 50px 50px;
  gap: 20px;
}


grid

grid-template-columns

grid-template-rows

.child1 {
  background-color: #f08080;
}
.child2 {
  background-color: #48d1cc;
}
.child3 {
  background-color: #98fb98;
}
.child4 {
  background-color: #ee82ee;
}
.child5 {
  background-color: #ffa500;
}
.child6 {
  background-color: #ffff00;
}
.child7 {
  background-color: #cd5c5c;
}
.child8 {
  background-color: #00ffff;
}
.parent {
  display: grid;
  /* 問題1. 子要素を2行4列で配置し、要素間の余白を指定しよう */
}


要素と要素の間に余白を指定しよう

子要素をグリッド要素にしよう

子要素の配置を指定しよう

【演習】カード要素をグリッドレイアウトで均等に配置をしよう

親要素の幅に対して、分割で子要素の幅を指定しよう

【演習】カード要素をグリッドレイアウトで柔軟に配置しよう

HTML&CSSのレイアウト作成に欠かせないタグについて学んでいきます。

「Gridを使ってカード型レイアウトを学ぼう」レッスンの総復習クイズです。

要素と要素の間に余白を指定しよう

まずは必要なスキルを確認しましょう！