CSS Grid: jednoduché rozloženie obsahu

Úvod > Tipy a triky > Tvorba webstránok > CSS Grid: jednoduché rozloženie obsahu

Úvod

V tomto článku sa naučíš vytvoriť jednoduchý **grid layout** pre webstránku pomocou CSS Grid. Grid umožňuje presné rozloženie obsahu do riadkov a stĺpcov a prispôsobenie pre rôzne veľkosti obrazovky.

1. HTML štruktúra gridu

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

2. CSS Grid štýly

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

.grid-item {
background-color: #c8e6c9;
padding: 20px;
border-radius: 10px;
text-align: center;
}

@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr; /* stĺpcové usporiadanie na mobiloch */
}
}

Záver

CSS Grid ti umožňuje flexibilne a presne rozložiť obsah na stránke. Môžeš kombinovať rôzne počet stĺpcov, riadkov, gapy a media queries pre responzívny dizajn. Tento príklad je jednoduchý, ale dá sa rozšíriť o zložitejšie layouty.

Aktualizovaný:

Iné Články

a 19 ďaľších ...