(Demo – Sections)
da Breite des Content-Divs über "Container" geregelt wird
Absolute Positioning => Centered
Geary => .Mit %-Werten spielen
1. Absolute Content-Div => ABSOLUTE
– Top: 50%
– Left: 50%
2. Absolute Content-Div => TRANSFORM
– Translate X: -50%
– Translate Y: -50%
Grid - mit Grid-Klassen
Anleitung ACSS-Klasse => .clickable-parent
Sinn:
– Macht einen Accessible Link-Wrapper RUND um ganze Card
– Nimmt dazu EINEN Link innerhalb der Card und erweitert ihn auf ganze Card
Video:
https://www.youtube.com/watch?v=q_R2JCMz2I8
=> ab Minute: 1:00:55
Steps:
1. Card normal aufbauen
2. EINEN Link auf irgendein Element setzen + diesem Element die Klasse “.clickable-parent” vergeben
3. Positioning:
=> Element mit Klasse “.clickable-parent” => Position STATIC
=> Nächsthöherem Parent-Div => Position STATIC
=> Main-Card => Position RELATIVE (ist eh bei Bricks immer Standard)
Grid - mit Grid-Klassen
Anleitung ACSS-Klasse => .clickable-parent
Sinn:
– Macht einen Accessible Link-Wrapper RUND um ganze Card
– Nimmt dazu EINEN Link innerhalb der Card und erweitert ihn auf ganze Card
Video:
https://www.youtube.com/watch?v=q_R2JCMz2I8
=> ab Minute: 1:00:55
Steps:
1. Card normal aufbauen
2. EINEN Link auf irgendein Element setzen + diesem Element die Klasse “.clickable-parent” vergeben
3. Positioning:
=> Element mit Klasse “.clickable-parent” => Position STATIC
=> Nächsthöherem Parent-Div => Position STATIC
=> Main-Card => Position RELATIVE (ist eh bei Bricks immer Standard)
Grid - mit Flex-Klassen (automatisch responsive) => KURZ (& noch besser als LANG)
Tutorial von Cracka
https://youtu.be/I1o4LfHn288
Step 1 – xxx
xxx xxx xxx xxx xxx
Step 2 – xxx
xxx xxx xxx xxx xxx
Step 3 – xxx
xxx xxx xxx xxx xxx
Step 4 – xxx
xxx xxx xxx xxx xxx
Grid - mit Flex-Klassen (automatisch responsive) => LANG
Tutorial von Cracka
https://youtu.be/6kRHK6AGPtA
Tutorial von Ivan Nagraha
https://youtu.be/N3LleJ_qVzQ
Step 1 – Settings am Parent Div
- Flex-Wrap => wrap (.flex–wrap)
- Flex-Direction => row (.flex–row)
- Align Main Axis => center
- Align Cross Axis => stretch
Step 2 – Settings in jeder Child-Card (auf Klasse)
=> flex-grow / flex-shrink / flex-basis
- Flex-Basis => Anzahl der Spalten einstellen: zB 50% = 2 Spalten / 25 % = 4 Spalten
=> MINIMUM-Breite, den eine Card mindestens einnehmen MUSS (Card darf nicht schmäler werden) - Flex-Grow => Immer “1”
wie viel Platz eine Card im Verhältnis zu anderen Cards MAXIMAL einnehmen soll - Flex-Shrink => Immer “1”
=> Auf wie viel Platz eine Card im Verhältnis zu anderen Cards MINIMAL einnehmen soll
Step 3 – Gap einstellen und Spaltenanzahl adaptieren
Teil 1/2 => PARENT DIV:
- Flex-Gap (Columns + Rows einstellen) => var(–space-m)
- => Sobald man Gap eingibt, stimmt die Anzahl der Spalten unten nicht mehr
- Bsp: 25 % = nicht mehr 4, sondern 3 Spalten
- Grund 1: Die Gaps brauchen auch Platz, also sind 4 x 25 % + 3 Gaps => mehr als 100% … geht sich in einer Reihe nicht mehr aus
- Grund 2: Wir haben als flex-basis 25 % Card-Div eingegeben. Das heißt, dass es sich (aufgrund der Gaps) nicht mehr ausgeht, dass jede Karte mindestens 25 % hat. Deshalb bricht Flexbox automatisch auf 3 Spalten um, damit jede Karte wieder mindestens die Breite von flex basis 25 % einnehmen kann.
Teil 2/2 => CARD DIV:
- Lösung: Unten bei flex-basis nur etwas weniger als 25 % eingeben (zB 20 %), bis sich 4 Reihen wieder ausgehen.
- Muss nicht genau sein, weil flew-grow 1 und flex-shrink 1 dafür sorgen, dass automatisch der verfügbare Platz voll auf 100 % ausgefüllt wird.
Step 4 – CARD DIV
=> Breakpoint-Settings definieren (Automatisch Responsive)
- Card-Div / Style => Min-Width definieren (zB 200px / 300px oder 20rem / 30rem)
=> Card darf nie kleiner als 300px werden
Lösung, dass letzte Card immer 100% breit ist
=> Auf ID-Ebene => flex-grow auf zb 0.5 setzen, dann ist letzter Container immer nur 50% breit
=> Ev. auf mehreren Breakpoints anders machen
Michi => .Klasse “center–all”
1. Main Card => .center–all