Scribd
Hochladen
26 Ansichten4 Seiten

Grid Layout

Das Dokument beschreibt die Verwendung eines Grid Layouts für den body-Bereich einer Webseite. Es werden drei Spalten und drei Zeilen definiert, wobei header und footer über die gesamte Breite platziert werden. Zusätzlich wird ein typisches zweispaltiges Layout mit Navigation und Inhalt vorgestellt.

Hochgeladen von

papayacookie.kuerbistumor
Copyright
© All Rights Reserved
Wir nehmen die Rechte an Inhalten ernst. Wenn Sie vermuten, dass dies Ihr Inhalt ist, beanspruchen Sie ihn hier.
Verfügbare Formate
Als PDF, TXT herunterladen oder online auf Scribd lesen
26 Ansichten4 Seiten

Grid Layout

Das Dokument beschreibt die Verwendung eines Grid Layouts für den body-Bereich einer Webseite. Es werden drei Spalten und drei Zeilen definiert, wobei header und footer über die gesamte Breite platziert werden. Zusätzlich wird ein typisches zweispaltiges Layout mit Navigation und Inhalt vorgestellt.

Hochgeladen von

papayacookie.kuerbistumor
Copyright
© All Rights Reserved
Wir nehmen die Rechte an Inhalten ernst. Wenn Sie vermuten, dass dies Ihr Inhalt ist, beanspruchen Sie ihn hier.
Verfügbare Formate
Als PDF, TXT herunterladen oder online auf Scribd lesen

Grid Layout

body {
display: grid;

gap: 0.5em;

grid-template-columns: 1fr 3fr 1fr;


grid-template-rows: auto 1fr 100px;

header,
footer {

grid-column: 1 / -1;

Das Grid Layout erstellt für den body ein Raster mit 3 Spalten und 3 Reihen. Diese
erhalten zum Teil feste, zum Teil flexible Höhen und Breiten. So bestehen die Werte
für grid-template-columns nur aus Bruchteilen (fr - der verfügbare Platz verteilt sich
automatisch. Die Höhe richtet sich in der ersten Reihe nach dem Inhalt ( auto), in der
letzten beträgt sie 100px Höhe - die mittlere Reihe nimmt mit der Festlegung 1fr wieder
den verfügbaren Rest ein.

Nur header und footer werden mit grid-column von der ersten (1) bis zur letzen
Randlinie (-1) positioniert. Im 3-Spalten-Layout bei breiten Viewports erstrecken Sie
sich über die gesamte Breite.
Typisches Layout mit 2 Spalten:

[Link]

body {
display: grid;
gap: 0.5em;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr 100px;
margin: 0 auto;
max-width: 60em;
font-family: sans-serif;
}
header,
footer {
grid-column: 1 / -1;
}

header {
background: #F1F3F4;
border-color: #d5d5d5;
}

main {
background: #ffede0;
border-color: #df6c20;
}

footer {
background: #e4ebf2;
border-color: #8a9da8;

}
footer * {
float: right;
clear: right;
margin: 0 0 1em;
}

header,
nav,
main,
footer {
border-radius: 0px 0.5em 0.5em;
border: 1px solid;
padding: 10px;
}
[Link]

<html>
<head>
<title>
Typisches 2-Spalten-Layout
</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<header>
<img src="[Link]" alt="logo">
<h1>2-Spalten-Layout mit Grid</h1>
</header>

<nav>
<h2>Navigation</h2>
<ul>
<li><a tabindex="0" aria-current="page">Startseite</a>
</li>
<li><a href="#">Unterseite1</a>
</li>
<li><a href="#">Unterseite2</a>
</li>
</ul>
</nav>

<main>
<h2>CSS-basierte Grid Layouts</h2>
<p>Grid Layout ist wie Flexbox eine sehr moderne und einfache Möglichkeit,
responsive
und flexible Layouts zu erstellen, ohne feste Größenangaben und
weitere CSS-Einstellungen
wie position, float oder clear nutzen zu müssen. </p>
<p>Dabei können Elemente beliebig innerhalb eines Rasters platziert
werden, wenn gewünscht,
auch übereinander. </p>
<p>Grid Layout wird in allen modernen Browsern unterstützt. </p>
</main>

<footer> <a href="[Link]


<p>© 2023 SELFHTML</p>
</footer>

</body>
</html>

Das könnte Ihnen auch gefallen