@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

Moderne Weblayouts mit Flexbox und Grid

By robertmittl

Moderne Weblayouts mit Flexbox und Grid

  • 30
Loading comments...

More from robertmittl