Interaktive Medien 1. Semester Martin Vollenweider · 2019-09-04 · 4 Unterschiede Grid und...
Transcript of Interaktive Medien 1. Semester Martin Vollenweider · 2019-09-04 · 4 Unterschiede Grid und...
Interaktive Medien 1. Semester Martin Vollenweider
Layout im Web — CSS Grid
Interaktive Medien 1. Semester, Martin Vollenweider
26.07.2020
2
Layouten mit CSS – CSS Grid
3
Aufbau
4
Unterschiede Grid und Flexbox 1. Das CSS Grid Layout ist zweidimensional (horizontal und vertikal; resp. Spalten
und Zeilen). Flexbox ist eindimensional (horizontal oder vertikal; resp. Spalten oder Zeilen).
2. CSS Grid entspricht dem Vorgehen Layout first. Flexbox entspricht dem Vorgehen Inhalt first.
3. In einem Grid-Container kann ein Flexbox-Container platziert werden. Umgekehrt ist das nicht möglich
Quelle
5
Inhalt first (Flex) vs Layout first (Grid)
Obiges Beispiel
6
Aufbau der HTML-Struktur
Im Grid-Container wird festgelegt, dass die untergeordneten Elemente (Grid-Items) dem Grid-Muster folgen.
Weitere verschachtelte Elemente (Inhalt) sind davon nicht betroffen.
7
Wichtigste Befehle im Grid-Container display: grid; grid-template-columns: 1fr 1fr 2fr; oder grid-template-columns: repeat(4, 250px); grid-column-gap: 2vw; grid-template-rows: 50px 200px; oder grid-auto-rows: 100px; /*auto für autom Höhen*/ grid-row-gap: 5px; oder grid-gap: 5px; /* selber hori und verti Gap */
Einheiten (nur für Grid) Neue CSS Einheit: fr (für Fraction) = übrigbleibender Rest
8
Möglichkeit 1: Bereiche zusammenfassen mit Areas:
<div class="wrapper"> <div id="areaHeader">Das ist der Header</div> <div id="areaNavi">Das ist die Navigation</div> <div id="areaContent1">Content1 2 Spalten</div> <div id="areaContent2">Content2 2 Reihen, 2 Spalten</div> </div>
.wrapper { display: grid; grid-row-gap: 5px; grid-column-gap: 5px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
9
/* grid-area: Row Start / Column Start / Row End / Column End; */ #areaHeader { grid-area: 1 / 1 / 2 / 5; } #areaNavi { grid-area: 2 / 1 / 8 / 2; } #areaContent1 { grid-area: 2 / 2 / 3 / 4; } #areaContent2 { grid-area: 3 / 2 / 5 / 4; }
10
Möglichkeit 2: Bereiche zusammenfassen mit Areas und Namen
<div class="wrapper"> <div id="areaHeader">Das ist der Header</div> <div id="areaNavi">Das ist die Navigation</div> <div id="areaContent1">Content1 2 Spalten</div> <div id="areaContent2">Content2 2 Reihen, 2 Spalten</div> </div>
.wrapper { display: grid; grid-row-gap: 5px; grid-column-gap: 5px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
11
grid-template-areas: /* Der Punkt (.) bedeutet: kein Inhalt */ "header header header header" "navi content1 content1 . " "navi content2 content2 . " "navi content2 content2 . " "navi . . . " "navi . . . " "navi . . . "; }
#areaHeader { grid-area: header; } #areaNavi { grid-area: navi; } #areaContent1 { grid-area: content1; } #areaContent2 { grid-area: content2; }
12
Möglichkeit 3: Grid-Items vebinden
<div class="wrapper"> <div id="areaHeader">Das ist der Header</div> <div id="areaNavi">Das ist die Navigation</div> <div id="areaContent1">Content1 2 Spalten</div> <div id="areaContent2">Content2 2 Reihen, 2 Spalten</div> </div>
.wrapper { display: grid; grid-row-gap: 5px; grid-column-gap: 5px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; }
13
/* grid-area: Row Start / Column Start / Row End / Column End; */
#areaHeader {
grid-column: 1 / span 4; /* Beginn Col 1, 4 Cols verbunden */
}
#areaNavi {
grid-row: 2 / span 6;
}
#areaContent1 {
grid-row: 2 / span 1;
grid-column: 2 / span 2;
}
#areaContent2 {
grid-row: 3 / span 2;
grid-column: 2 / span 2;
} Auch möglich: grid-row-end: span 2; /* nur Ende */
14
Übung 0 Das Layout soll folgendermassen aussehen:
Übung 0 (layout_grid_00_unfertig.html)
Fertiges Beispiel Übung 0 (layout_grid_00.html)
Erklärung
Element B geht über zwei Spalten (grid-column: 2 / 4; oder grid-column: 2 / span 2;)
Element A geht über zwei Zeilen (grid-row: 1 / 3; oder grid-row: 1 / span 2;)
15
Übung 1 Übung 1 (layout_css_grid_01_unfrtig.html). Layout:
Fertiges Beispiel 1 (layout_css_grid_01.html)
Übung 2 Übung 2 (layout_css_grid_02_unfertig.html). Layout:
Fertiges Beispiel 2 (layout_css_grid_02.html)
16
Übung 3 Übung 3 (layout_css_grid_03_unfertig.html). Layout:
Linker und rechter Rand sind je 2.85vw, die Spaltenbreiten 5.75vw und die Abstände dazwischen 2.3vw breit. Die Navigation ist 50px, das Moodbild 100px und die Kategorien 200px hoch. Der Abstand unterhalb Navigation und Moodbild sind 20px.
17
Fertiges Beispiel Übung 3 Beispiel 3 (layout_css_grid_03.html)
Mobile Darstellung Desktop Darstellung
18
Hilfsmittel und Tools Tool von Nina Gässli (Bachelorarbeit 2019)
19
Praktisches Werkzeug: Griddy oder Grid Cheat Sheet
Tool Layoutit
Vue Grid Generator
Tool CSS GR
CSS Grid Layout Generator
Generator von Codepen
CSS Grid Generator
20
Beginner’s Guide To CSS Grid And Flexbox Visuelles Tutorial CSS Grid
CSS Grid Cheat Sheet
21
Inhaltsverzeichnis Layouten mit CSS – CSS Grid ............................................................................................ 2
Aufbau .............................................................................................................................. 3
Unterschiede Grid und Flexbox ...................................................................................... 4
Inhalt first (Flex) vs Layout first (Grid) .......................................................................... 5
Aufbau der HTML-Struktur ............................................................................................. 6
Wichtigste Befehle im Grid-Container ........................................................................... 7
Einheiten (nur für Grid) ................................................................................................... 7
Möglichkeit 1: Bereiche zusammenfassen mit Areas: ................................................ 8
Möglichkeit 2: Bereiche zusammenfassen mit Areas und Namen .......................... 10
Möglichkeit 3: Grid-Items vebinden ............................................................................. 12
Übung 0 .......................................................................................................................... 14
Übung 1 .......................................................................................................................... 15
22
Übung 2 .......................................................................................................................... 15
Übung 3 .......................................................................................................................... 16
Fertiges Beispiel Übung 3 ............................................................................................. 17
Hilfsmittel und Tools ..................................................................................................... 18