grid

grid-template-columns

.child1 {
  background-color: #f08080;
  height: 50px;
}
.child2 {
  background-color: #48d1cc;
  height: 50px;
}
.parent {
  /* 問題1. gridを使って子要素を均等配置にしよう */
  display: grid;
  /* 問題2. grid-template-columnsを使って2列にしよう */
  grid-template-columns: 50px 50px;
}


.child1 {
  background-color: #f08080;
  height: 50px;
}
.child2 {
  background-color: #48d1cc;
  height: 50px;
}
.parent {
  /* 問題1. gridを使って子要素を均等配置にしよう */

  /* 問題2. grid-template-columnsを使って2列にしよう */
}


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

grid-template-rows

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

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

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

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

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

CSS Gridレイアウトによるウェブページの設計方法を学びます。
グリッドシステムを用いて整理されたカード型のレイアウトを作成し、現代のWebデザイン技術を習得します。

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

Web制作コース

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

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