レイアウトについて学んだことのメモ。覚えなさい!と自分に喝を入れて学んだことをメモします。同様、親ラップと子要素が必要です。grid』を指定します。grid}これだけでは変化は起こらないので、列と行を親ラップで定義します。200px;}『grid-template-columns』で列、『grid-template-rows』で行を定義しました。上記の指定だと、幅200pxの列が3列、高さ200pxの行が2行となります。行と覚えておくといいかもしれません。200px;}構造は冒頭のHTMLを使って、CSSは200px角の正方形で3×3のGridレイアウトを作りました。色は別で適当にCSSを当てていまが、今回そのコードは端折ります。『3×3なのになんで2行?』と思いますが、現状のHTMLはアイテムが6つなのでこれでOKです。アイテム子要素にCSSを当てていきます。4;の4はどこから来た?』って思いますよね。少なくとも私は思いました笑わかりやすくGridのラインを可視化すると↓のようになっています。4;の『4』が何を意味するかわかったと思います。お分かりだと思いますが、先ほどのCSSは『grid-column(列)の始まりを1の線、終わりを4の線』という指定だったので、指定した1番のボックスは1〜4までの幅になりました。Gridの親ラップの横幅目一杯に広がったということです。次は例として、grid-row(行)に指定してみます。『grid-row(行)の始まりを1の線、終わりを4の線』と指定することで、1のボックスがGridラップの一番上から一番下まで伸び、その横に1番ボックス以外のボックスが埋めるように回り込んで並んでいます。指定する数字を変えてぜひ色々と試してみてください。4;↑のようにショートハンドで指定できます。隣接セレクタが効かないときに確認する箇所の備忘録。