Použitie CSS Grid pre rozloženie

Úvod

CSS Grid je mocný nástroj pre pokročilé rozloženie webstránky. Ukážeme jednoduchý grid layout.

1. HTML štruktúra

 <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> 

2. CSS Grid štýly

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

.grid-item {
background-color: #4CAF50;
color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
}

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

Záver

CSS Grid umožňuje jednoduché aj komplexné rozloženia, ktoré sú plne responzívne a flexibilné.