何をする書き方？
CSS Gridは二方向の配置に向いています。grid-template-columnsで列を定義します。frは利用可能な空間を分け合う単位。repeat(3, 1fr)なら、同じ割合の列を3本作ります。
基本の形
grid-template-columns: repeat(3, 1fr);display: grid親要素をGridの容器にする。1fr利用可能な幅の1つ分の割合。gap行と列の間隔。短い例で確かめる
style.css
.items {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}結果
項目が2列に並びます。
準備・実行方法を確認する
HTMLのheadに <link rel="stylesheet" href="style.css"> を入れ、同じフォルダーにstyle.cssを作ります。HTMLをブラウザーで開き、保存後に再読み込みして確認します。
もう少し詳しいコードを見る
style.css
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.cards > * {
min-width: 0;
}結果
class="cards"の子要素が、同じ割合の3列に並びます。4つ目は次の行に配置されます。
ここで、書き換えてみよう
文字や数字を変えたら「実行する」を押します。変更したコードは、ページを移動すると元に戻ります。
一問だけ、復習しよう
「Gridで一覧を作る」の書き方はどれ？
少し変えてみよう
repeat(3, 1fr)をrepeat(2, 1fr)に変えて、2列の一覧にしてみましょう。
つまずいたら、ここを確認
長い文字列や画像は列からはみ出すことがあります。画像にはmax-width: 100%などを指定します。
自分の言葉でメモ
記録はこのブラウザーに保存されます。