Grid

HTML

グリッドレイアウト

Gridの基本

CSS Gridレイアウトの基礎

基本的なGridレイアウト

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.grid-item {
    padding: 2rem;
    background: #e0e0e0;
    border-radius: 8px;
    text-align: center;
}

Flexbox

セマンティック