Folge mir auf Twitter.

Webentwicklung - CSS-Grid-Layouts

Hochschule für Technik und Wirtschaft Berlin

Dipl.-Inform. Thomas Ziemer

Webentwicklung - CSS-Grid-Layouts

Dipl.-Inform. Thomas Ziemer

Zum Vollbildmodus wechseln

Grid-Layouts

Native Grid-Layouts

Webentwicklung - CSS-Grid-Layouts

Aufbau nativer Grid-Layouts

Aufbau nativer Grid-Layouts

Ein simples Zweispalten-Layout mit Kopf- und Fußbereich:

body {
   height: 100vh; /* relativ zu 1% der Viewport-Höhe */
   margin: 0;
   display: grid /* nicht mehr flex */;
}

<body>
   <header>Überschrift</header>
   <nav>Navigation</nav>
   <main>Inhalt</main>
   <footer>Fußzeilen</footer>
</body>

Aufbau nativer Grid-Layouts