test
Grid¶
Grid
Grid Layout ermöglicht es, Elemente in Spalten und Reihen auszurichten, ähnlich wie in Tabellen. Jedoch gibt es viel mehr Gestaltungsmöglichkeiten und diese sind einfacher umzusetzen mit CSS Grid als es mit Tabellen der Fall war. Beispielsweise kann das Kindelement eines Grid-Container-Elements so positioniert werden, dass es andere überlappt und überlagert, ähnlich wie bei mit CSS positionierten Elementen.
Ein CSS Grid Layout bietet dem Webdesigner zwei Dimensionen zur Platzierung der Objekte. Statt nur auf einer Achse kann man mit CSS Grid ein Raster mit Zeilen und Spalten verwenden. Flexbox ist eindimensional. Die Elemente werden im Prinzip nur auf einer Achse verschoben.
Ohne Grid¶
<style>
.grid-container div{
background-color:#3f80d8;
border: 3px solid #28528b;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
</style>
<body>
<div class="grid-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
</div>
</body>
Mit Grid¶
Spaltenanzahl¶
<style>
.grid-container div {
background-color: #3f80d8;
border: 3px solid #28528b;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
justify-content: center;
}
</style>
Mit grid-template-columns: 200px 200px 200px oder repeat(3, 200px) legen wir 3 Spalten mit 200 Pixel Breite fest.
Höhe und Anzahl der Zeilen festlegen¶
Die erste Zeile ist 100px, die Zweite 200px hoch:
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 200px;
justify-content: center;
}
Höhe aller Zeilen gleich¶
Auto Rows¶
Overfloat
grid-auto-rows können Sie auch verwenden, wenn es zu einem Overflow kommen könnte.
Hier wurde z.B. in Item 4 ein Lorem Ipsum-Text eingefügt. Es kkommt zum Overflow, da Item 4 nicht genügend Platz bietet.
Lösung:
Mit der Funktion minmax() können Sie die Minimalgrösse auf 150px einstellen und die Maximalgrösse mit auto so einstellen, dass sich die Grösse auf den Inhalt anpasst.
Grid Erweitert¶
Fractions¶
<body>
<div class="grid-container">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">3</div>
<div class="item-5">5</div>
</div>
</body>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
Fraction
1fr ist ein Teil des verfügbaren Platzes.
Mit grid-template-columns: 1fr 1fr 1fr erzeugen wir 3 Spalten welche jeweils gleich viel Platz bekommen (1/3 der Bildschirmbreite)
Mit grid-template-rows: 100px 100px definieren wir die Zeilenhöhe der ersten beiden Zeilen
Gaps¶
Die Breite des Containers soll genau 500px betragen und zwischen den Elementen soll 10px Abstand sein.
.grid-container {
display: grid;
width: 500px;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 100px 100px;
row-gap: 10px;
column-gap: 10px;
}
Grid für Seitenlayouts¶
Grid-Template-Areas¶
<style>
.grid-container div {
background-color: #3f80d8;
border: 3px solid #28528b;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
/*Aufteilung unter Verwendung der Grid-Bereiche*/
grid-template-areas: "eins eins zwei" "drei vier zwei" "fuenf vier sechs";
gap: 10px;
}
/*Grid-Bereiche festlegen*/
.item-1 {
grid-area: eins;
}
.item-2 {
grid-area: zwei;
}
.item-3 {
grid-area: drei;
}
.item-4 {
grid-area: vier;
}
.item-5 {
grid-area: fuenf;
}
.item-6 {
grid-area: sechs;
}
</style>
<body>
<div class="grid-container">
<div class="item-1">Header</div>
<div class="item-2">Navigation</div>
<div class="item-3">Aside</div>
<div class="item-4">Main</div>
<div class="item-5">Footer</div>
</div>
.grid-container {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px auto 50px;
grid-template-areas: "header header header" "nav nav nav" "aside main main" "footer footer footer";
}
.item-1 {
grid-area: header;
}
.item-2 {
grid-area: nav;
}
.item-3 {
grid-area: aside;
}
.item-4 {
grid-area: main;
}
.item-5 {
grid-area: footer;
}
<body>
<aside></aside>
<header></header>
<section></section>
<section></section>
<section></section>
<main></main>
<footer></footer>
</body>
body,
html {
height: 100vh;
}
body {
margin: 0;
display: grid;
grid-template-columns: auto 27% 27% 27%;
grid-template-rows: 8% 30% auto 10%;
grid-template-areas:
"sidebar header header header"
"sidebar section1 section2 section3"
"sidebar main main main"
"sidebar footer footer footer";
}
aside {
grid-area: sidebar;
background-color: #007fff;
}
header {
grid-area: header;
background-color: #91c8ff;
}
section:nth-of-type(1) {
grid-area: section1;
background-color: #b3d8fd;
}
section:nth-of-type(2) {
grid-area: section2;
background-color: #5e86af;
}
section:nth-of-type(3) {
grid-area: section3;
background-color: #6d9fd2;
}
main {
grid-area: main;
background-color: #7da9d5;
}
footer {
grid-area: footer;
background-color: #588ec3;
}
Und noch responsive in der Mobile First Variante:
/* body für Mobile ohne Query: */
body {
margin: 0;
display: grid;
grid-template-columns: 100%;
grid-template-rows: repeat(auto, 5);
grid-template-areas:
"section1"
"section2"
"section3"
"main"
"footer";
}
/* body mit Query für Desktop */
@media only screen and (min-width: 768px) {
body {
margin: 0;
display: grid;
grid-template-columns: auto 27% 27% 27%;
grid-template-rows: 8% 30% auto 10%;
grid-template-areas:
"sidebar header header header"
"sidebar section1 section2 section3"
"sidebar main main main"
"sidebar footer footer footer";
}
}
Grid-column-start und grid-column-end¶
Koordinatensystem
In dieser Variante können Sie die Rechtecke mit Koordinaten aufspannen:
Rechteck 4 hätte die Koordinaten: 2/3/5/4
(2,3) ist der Eckpunkt links oben (5,4) der rechts unten