Nun setzen wir uns mit Grid Layouts auseinander, die uns erlauben, komplexere Layouts zu erstellen. Grid Layouts sind besonders nützlich, wenn wir eine flexible Struktur benötigen, die sich an die Anzahl der Inhalte anpassen kann. Hier ist ein einfaches Beispiel, das ein Grid für ein Portfolio-Layout zeigt:
<!-- HTML-Code für das Portfolio-Layout -->
<html>
<head>
<title>Grid-Portfolio</title>
<style>
.portfolio {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
padding: 20px;
}
.portfolio-item {
background-color: #ddd;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="portfolio">
<div class="portfolio-item">Projekt 1</div>
<div class="portfolio-item">Projekt 2</div>
<div class="portfolio-item">Projekt 3</div>
<div class="portfolio-item">Projekt 4</div>
<div class="portfolio-item">Projekt 5</div>
</div>
</body>
</html>