🔲 CSS Gridチートシート
| プロパティ | 用途 | 値の例 |
|---|---|---|
display: grid | グリッドコンテナを作成 | display: grid; |
grid-template-columns | 列の定義 | grid-template-columns: 1fr 2fr 1fr; |
grid-template-rows | 行の定義 | grid-template-rows: 100px auto 50px; |
gap | セル間の余白 | gap: 16px; |
row-gap / column-gap | 行/列の余白を個別指定 | row-gap: 20px; column-gap: 10px; |
repeat() | 繰り返しパターン | grid-template-columns: repeat(3, 1fr); |
fr | 残りスペースの比率 | grid-template-columns: 1fr 2fr; |
minmax() | 最小〜最大の範囲指定 | grid-template-columns: minmax(200px, 1fr); |
auto-fill | 列を自動で埋める | repeat(auto-fill, minmax(200px, 1fr)) |
auto-fit | 列を自動で伸ばす | repeat(auto-fit, minmax(200px, 1fr)) |
grid-column | アイテムの列位置 | grid-column: 1 / 3; |
grid-row | アイテムの行位置 | grid-row: 1 / span 2; |
grid-area | 名前付きエリアに配置 | grid-area: header; |
grid-template-areas | エリアの名前定義 | grid-template-areas: "header header" "nav main"; |
justify-items | セル内の水平配置 | justify-items: center; |
align-items | セル内の垂直配置 | align-items: center; |
place-items | セル内の配置（一括） | place-items: center; |
justify-content | グリッド全体の水平配置 | justify-content: space-between; |
align-content | グリッド全体の垂直配置 | align-content: center; |
justify-self | 個別アイテムの水平配置 | justify-self: end; |
align-self | 個別アイテムの垂直配置 | align-self: start; |
grid-auto-rows | 暗黙的行のサイズ | grid-auto-rows: minmax(100px, auto); |
grid-auto-columns | 暗黙的列のサイズ | grid-auto-columns: 200px; |
grid-auto-flow | 自動配置の方向 | grid-auto-flow: dense; |
subgrid | 親グリッドの線を継承 | grid-template-columns: subgrid; |
📖 関連する用語
❓ よくある質問
CSS Gridチートシートはどんな人向け？
CSS Grid初心者〜中級者向け。基本レイアウトから高度なグリッド配置まで網羅しています。
FlexboxとGridの使い分けは？
1方向の並びはFlexbox、2次元のレイアウトはGridが適しています。
印刷して使える？
はい。印刷に最適化されたレイアウトで出力されます。