@mittlmedien
info@mittl-medien.de
Moderne Weblayouts mit Flexbox und Grid
Über mich
- Robert Mittl
- Webentwickler
- Joomla seit 2009
- Begeisterung für JavaScript
- Progressive Web App (PWA)
info@mittl-medien.de
@mittlmedien
Ohne Framework 🤔
- schnelle Ladezeiten
- Framework muss erlernt werden
- flexibler und einfachere Anpassung
- bei Verwendung einen Frameworks muss oft viel Code überschrieben werden
info@mittl-medien.de
@mittlmedien
Grid vs Flexbox
- beide Techniken bieten seine Vorzüge
- Flexbox durch Flussmethode sehr schnelle Ergebnisse
- bei Einsatz von Grid können Layouts genauer realisiert werden
- Flexbox kann für Grid ein Fallback sein
info@mittl-medien.de
@mittlmedien
Welche Layout Technik? 🧐
info@mittl-medien.de
@mittlmedien
Merkmale Flexbox
info@mittl-medien.de
@mittlmedien
Merkmale Grid
info@mittl-medien.de
@mittlmedien
Flexbox 👨🏻🏫
info@mittl-medien.de
@mittlmedien
.container {
display: flex;
flex-diretion: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.container:nth-child(1){
flex: 1 0 min-content; /* grow | shrink | basis */
}
.container:nth-child(2){
align-self: flex-end;
}Flexbox 👨🏻🏫
info@mittl-medien.de
@mittlmedien
Flexbox 👨🏻🏫
Flexbox Sticky Footer 👨🏻🏫
info@mittl-medien.de
@mittlmedien
body.classname {
display: flex;
min-height: 100vh;
flex-direction: column;
}
article.website-content {
flex: 1;
}Flexbox Debugging 👨🏻🏫
Text
Firefox Developer Tools 🚀
Flexbox Debugging 👨🏻🏫
Text
Firefox Developer Tools 🚀
Grid 👨🏾🏫
info@mittl-medien.de
@mittlmedien
.container {
grid-template-columns: 40px 1fr auto 50px 40px;
grid-template-rows: 25% 100px auto;
justify-items: space-between;
align-items: stretch;
grid-row-gap: 3em;
grid-column-gap: 1vh;
}
.container:nth-child(1){
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
.container:nth-child(2){
grid-column: 2 / span 3;
grid-row: 4 / 5;
}Grid Template Areas 👩🏻🏫
info@mittl-medien.de
@mittlmedien
.body {
grid-template-areas: "header header header"
"nav nav ."
"content content aside"
"footer footer footer";
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 3fr 20px 10r 2fr;
}
.header {
grid-area: header;
}
.aside {
grid-area: aside;
}Internet Explorer wird nicht unterstützt.
Grid Beispiel 👩🏻🏫:
info@mittl-medien.de
@mittlmedien
Grid Beispiel 👩🏻🏫:
info@mittl-medien.de
@mittlmedien
Grid 👩🏻🏫:
info@mittl-medien.de
@mittlmedien
grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
Explicit Grid
info@mittl-medien.de
@mittlmedien
.wrapper {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, minmax(100px, auto));
}
aside {
grid-row: 1 / -1;
}Text
mit -1 springt man zur letzten Zeile im Explicit Grid
Subgrid 👩🏻🏫:
info@mittl-medien.de
@mittlmedien
lorem ipsum lorem ipsum
Lorem
Lorem
Subgrid 👩🏻🏫:
info@mittl-medien.de
@mittlmedien
.grid {
display: grid;
grid-template-columns: [line1] 1fr [line2] 2fr [line3] 1fr [line4];
grid-template-rows: auto auto auto;
}
.item {
grid-column: 2 / 3;
grid-row: 1 / 3;
display: grid;
grid-template-columns: subgrid;
grid-template-rows: 10em 5em 200px 200px;
}Grid Sticky Footer 👨🏻🏫
info@mittl-medien.de
@mittlmedien
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: 1fr auto;
}
.footer {
grid-row-start: 2;
grid-row-end: 3;
}Debugging
Flexbox vs Grid Fallback
info@mittl-medien.de
@mittlmedien
@supports(display: flex) {
/* definde your CSS */
}
@supports(display: grid) {
/* define your CSS */
}
container {
display: table;
//display: table-cell;
}Browser Prefix mit Webpack oder Gulp generieren
Support Flexbox
info@mittl-medien.de
@mittlmedien
Support Grid
info@mittl-medien.de
@mittlmedien
Support Subgrid
info@mittl-medien.de
@mittlmedien
Aspect Ratio
info@mittl-medien.de
@mittlmedien
Durch variable Breiten der Container ist die Höhe der Elemente oft unbekannt.
<div class="container">
<img src="http://placeimg.com/660/943/animals" alt="dog" />
</div>.container {
background: gray;
width: 90%;
padding-bottom: calc(943px / 342 * 100);
height: 0;
}
img {
width: 100%;
}Tipps für moderne Layouts:
info@mittl-medien.de
@mittlmedien
- Einsatz der richtigen Tools (Flexbox, Grid, Column Layout, Floats)
- automatisch Elemente mit Grid fließen lassen
- feste Werte, Prozent mit minmax() arbeiten
- Spaltenanzahl dem Layout anpassen (muss nicht 12-spaltig sein)
- Einflussnahme auf die Zeilen (mehr Abstand)
- Überlappung, Weißraum
Quellen und Tools:
- Rachel Andrew - Codepen oder https://css-tricks.com/hello-subgrid
- Wes Bos - Grid Course https://cssgrid.io/
- Jen Simmons - Youtube
- CSS Tricks und Smashing Magazin
- 📙 Art Direction for the Web - Andy Clarke
Es gibt auch Grid Generatoren und Spiele!
info@mittl-medien.de
@mittlmedien
Fragen? 🤔
info@mittl-medien.de
@mittlmedien
Danke 😅
info@mittl-medien.de
@mittlmedien