レイアウトとスマートフォン対応

FlexboxとGridを使い、画面の幅に合わせて配置を変える方法を学びます。

1. Flexbox

横並びのメニューやカードに適しています。

.row {
 display: flex;
 gap: 12px;
}

表示例

写真地図記録

.grid {
 display: grid;
 grid-template-columns: repeat(2,1fr);
 gap: 12px;
}

表示例

@media (max-width: 700px) {
 .grid { grid-template-columns: 1fr; }
}

表示例

画面が700px以下なら、カードを1列に変更できます。