nicht angemeldet
Das ist ein einfaches Beispiel um die Möglichkeiten von CSS-Grid überhaupt kennenzulernen.
Wie bereits in einem anderen Beitrag von mir geschrieben könnten wir dir wahrscheinlich konkreter helfen wenn wir wüssten, was du im Endeffekt überhaupt erreichen willst.
Vielleicht hilft dir das Beispiel eines sogenannten Holy-Grail-Layouts weiter. Stör dich nicht an der Bezeichnung. Es geht darum eine flexible grundsätzliche Seitenstruktur nach bestimmten Regeln zu erstellen. Früher waren die Anforderungen nur sehr schwer umzusetzen, CSS-Grid hat das stark vereinfacht.
Nachfolgend meine Umsetzung, die du einfach mal bei verschiedenen Fensterbreiten ausprobieren kannst:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Holy Grail Layout mit CSS-Grid</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Basisangaben */
@media all {
* {
box-sizing: border-box;
}
}
/* Schriften */
@media all {
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.5;
}
h1 {
font-family: serif;
font-size: 1.2rem;
letter-spacing: 0.1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
h2, h3, h4, h5, h6 {
font-family: serif;
font-size: 1rem;
margin: 0.5rem 0rem 0.5rem 0rem;
}
p, li, dl, dt, address {
font-family: sans-serif;
font-size: 1rem;
font-style: normal;
margin: 0.5rem 0rem 0.5rem 0rem;
}
}
/* Grundlayout */
@media all {
body {
max-width: 100%;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
margin: 0rem auto 0rem auto;
}
.pageheader,
.navigation,
.content,
.sidebar,
.pagefooter {
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
border: 2px solid gray;
}
.sidebar a {
display: block;
margin: 0.5rem 0rem 0.5rem 0rem;
}
}
@media only screen and (min-width: 0px) {
}
/*Holy Grail Layout*/
@media all {
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 0.5rem;
}
}
@media only screen and (min-width: 600px) {
body {
grid-template-columns: 1fr 1fr;
}
.pageheader {
grid-column: 1 / 3;
}
.content {
grid-column: 1 / 3;
}
.pagefooter {
grid-column: 1 / 3;
}
}
@media only screen and (min-width: 900px) {
body {
grid-template-columns: 250px 1fr 250px;
}
.pageheader {
grid-column: 1 / 4;
}
.content {
grid-column-start: 2;
grid-row-start: 2;
}
.navigation {
grid-column-start: 1;
}
.pagefooter {
grid-column: 1 / 4;
}
}
@media only screen and (min-width: 1200px) {
body {
grid-template-columns: 300px 1fr 300px;
}
}
</style>
</head>
<body>
<header id="pageheader" class="pageheader">
<h1>Holy Grail Layout - CSS-Grid</h1>
</header>
<main id="content" class="content">
<h2>Beschreibung</h2>
<p>The Holy Grail Layout is a web page layout that consists of four sections - a header, footer, and a main content area with two sidebars, one on each side. The layout also adheres to the following rules</p>
<ul>
<li>Has a fluid center column width fixed-width sidebars</li>
<li>The center column should appear first in the markup, before the two sidebars (but after the header)</li>
<li>All three columns should be the same height, regardless of the content within them</li>
<li>The footer should always be at the bottom of the browser viewport, even when the content doesn't fill up the height of the viewport (sticky footer)</li>
<li>The layout should be responsive, all the sections should collapse into one column on smaller viewports</li>
</ul>
</main>
<nav id="navigation" class="navigation">
<h2>.navigation</h2>
</nav>
<aside class="sidebar">
<h2>Links zum <i>Holy Grail Layout</i></h2>
<a href="http://alistapart.com/article/holygrail/">A List Apart (2006, noch gar nix mit Flexbox oder CSS-Grid)</a>
<a href="https://bitsofco.de/holy-grail-layout-css-grid/">bitsofco</a>
<a href="http://webkrauts.de/artikel/2015/rasterfahndung-auf-der-suche-nach-der-besten-layouttechnik">Webkrauts</a>
<a href="http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm">Matthew James Taylor</a>
<a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/Einf%C3%BChrung">SelfHTML - CSS / Tutorials / Einführung / CSS-Grid</a>
</aside>
<footer id="pagefooter" class="pagefooter">
<h2>.pagefooter</h2>
</footer>
</body>
</html>
Matthias Scharwies
Rolf B
Der Martin