grid

grid-template-columns

.child1 {
  background-color: #f08080;
}
.child2 {
  background-color: #48d1cc;
}
.child3 {
  background-color: #98fb98;
}
.child4 {
  background-color: #ee82ee;
}
.child5 {
  background-color: #ffa500;
}
.child6 {
  background-color: #ffff00;
}
.parent {
  height: 100px;
  display: grid;
  /* 問題1. 列の幅をそれぞれ3分の1の長さになるようにしよう */
  grid-template-columns: 1fr 1fr 1fr;
}


.child1 {
  background-color: #f08080;
}
.child2 {
  background-color: #48d1cc;
}
.child3 {
  background-color: #98fb98;
}
.child4 {
  background-color: #ee82ee;
}
.child5 {
  background-color: #ffa500;
}
.child6 {
  background-color: #ffff00;
}
.parent {
  height: 100px;
  display: grid;
  /* 問題1. 列の幅をそれぞれ3分の1の長さになるようにしよう */
}



    const questions = [
        {
            title: '列の幅をそれぞれ3分の1の長さになるようにしよう',
            tests: [
                {
                    title: 'クラス`parent`に対し、横幅が親要素の3分の1の長さになるように、*grid-template-columns*プロパティを使って、*fr*で指定してください',
                    hint: '`.parent`に、*grid-template-columns*プロパティを*1fr 1fr 1fr*で指定してください',
                    test: () => isContainTextInEditor('grid-template-columns: 1fr 1fr 1fr;', 'style.css', '.parent {', '}')
                }
            ]
        }
    ];


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

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

grid-template-rows

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

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

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

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

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

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