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