@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

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.

Beispiel Codepen

 <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

	.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;

	}

	body.classname {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	}

	article.website-content {
	flex: 1;
	}

	.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;

	}

	.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;
	}

	grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

	grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );


	.wrapper {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, minmax(100px, auto));
	}



	aside {
	grid-row: 1 / -1;
	}

	.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;
	}

	html {
	height: 100%;
	}
	body {
	min-height: 100%;
	display: grid;
	grid-template-rows: 1fr auto;
	}
	.footer {
	grid-row-start: 2;
	grid-row-end: 3;
	}

	@supports(display: flex) {
	/* definde your CSS */
	}

	@supports(display: grid) {
	/* define your CSS */
	}

	container {
	display: table;
	//display: table-cell;
	}

	<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%;
	}