グリッドレイアウトの理解

知識課題

知識課題１

グリッドレイアウトとは何かについて調査し、以下の点を含めて説明してください。

• グリッドコンテナー
• グリッドアイテム

知識課題2

以下のグリッドコンテナーのプロパティについて調査し、それぞれの役割を説明してください。

• grid-template-columns
• grid-template-rows
• grid-template-areas
• justify-content
• align-content
• place-content
• column-gap
• row-gap
• gap

知識課題3

以下のグリッドアイテムのプロパティについて調査し、それぞれの役割を説明してください。

• grid-column
• grid-column-end
• grid-column-start
• grid-row
• grid-row-end
• grid-row-start
• grid-area
• justify-self
• align-self
• place-self

実践課題

Grid Gardenをプレイして、すべてのレベルをクリアしてください。ゲームを通じて、フレックスボックスの使い方を実践的に学びましょう。