grid

grid-auto-flow

grid-template-columns

grid-template-rows

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

.parent {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 問題1. ばらばらに配置されている子要素を、縦方向に配置してください */
  grid-auto-flow: column;
}

.child1 {
  background-color: red;
}

.child2 {
  background-color: blue;
}

.child3 {
  background-color: yellow;
}

.child4 {
  background-color: green;
}

.child5 {
  background-color: orange;
}

.child6 {
  background-color: pink;
}


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

.parent {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  /* 問題1. ばらばらに配置されている子要素を、縦方向に配置してください */
}

.child1 {
  background-color: red;
}

.child2 {
  background-color: blue;
}

.child3 {
  background-color: yellow;
}

.child4 {
  background-color: green;
}

.child5 {
  background-color: orange;
}

.child6 {
  background-color: pink;
}



    const questions = [
        {
            title: 'ばらばらに配置されている子要素を、縦方向に配置してください',
            tests: [
                {
                    title: '`.parent`に対し、縦方向に配置しよう',
                    hint: '*grid-auto-flow*プロパティを指定してください',
                    test: () => isContainTextInEditor('grid-auto-flow: column;', 'style.css', '.parent {', '}')
                }
            ]
        }
    ];


子要素の配置方法の指定

grid-row,grid-column

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

grid-auto-rows,-columns

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

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

演習問題

grid-template-areas

grid-area

子要素のエリアの指定

grid-template

グリッドの一括指定

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

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

Web制作コース

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

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