Um unsere Seiten noch komplexer zu gestalten, können wir das Grid-Layout verwenden, das uns ermöglicht, komplexere Strukturen zu erstellen. Wir definieren einen Container mit display: grid; und ein paar Spalten mit grid-template-columns: repeat(3, 1fr);. Hier ist ein Beispiel:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Blog</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 10px;
}
.header, .content, .sidebar, .footer {
background-color: #ddd;
padding: 10px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="header">Mein Blog</div>
<div class="content">
<h1>Willkommen bei meinem Blog</h1>
<p>Ein interessanter Beitrag über CSS Grid.</p>
</div>
<div class="sidebar">Rechtlicher Hinweis</div>
<div class="footer">Copyright © 2023</div>
</div>
</body>
</html>