Layouter med modern CSS - Flexbox & Grid

Varför behöver vi ett nytt sättatt göra layouter?

	

		

			
Header
		
		

			
Content
			
Sidebar
		
		

			
Footer
		
	

          

	Header


	

		Content
	
	

		Sidebar
	


	Footer

          

Vad bestämmer layouten? Display!

display: none;
display: block;
display: inline;
display: inline-block
display: table;
display: table-row;
display: table-cell;
display: contents;
display: grid;
display: inline-grid;
display: flex;
display: inline-flex;
display: flow;
display: flow-root;
					

..och detta är inte alla

Block & inline layout

Flexbox vs. Grid

Flexbox

display: flex;
justify-content: space-between;
align-items: center;
					

Justify vs. Align

Content vs. Items vs. Self

Demo

See the Pen Flex 1 by Rasmus Johansson (@rasmusjohansson) on CodePen.

Om layouten är trasig i demo klicka två gånger på Result-fliken för att rätta till detta.

Flex

flex: 1 1 auto;
/*****/
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
					

Flexbox fungerar i alla webbläsare du bryr dig om!

Grid layout

1fr

Demo

See the Pen Grid 1 by Rasmus Johansson (@rasmusjohansson) on CodePen.

Om layouten är trasig i demo klicka två gånger på Result-fliken för att rätta till detta.

See the Pen Grid 2 by Rasmus Johansson (@rasmusjohansson) on CodePen.

Om layouten är trasig i demo klicka två gånger på Result-fliken för att rätta till detta.

#grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr auto auto;
  grid-template-areas:
    "🐶 🐶 🐶 🐶"
    "🐭 🐭 🐭 🐭"
    "🐧 🐙 🐙 🐙"
    "🐧 🐙 🐙 🐙"
    "🦃 🦃 🦃 🦃";
}
header {
  grid-area: 🐶;
}
nav {
  grid-area: 🐭;
}
aside {
  grid-area: 🐧;
}
main {
  grid-area: 🐙;
}
footer {
  grid-area: 🦃;
}

					

See the Pen Grid 3 by Rasmus Johansson (@rasmusjohansson) on CodePen.

Om layouten är trasig i demo klicka två gånger på Result-fliken för att rätta till detta.

Kan vi använda grid?

Fallback

@supports (display: grid) {}

Nästa steg? Subgrid!

Lär er mer

Flexbox froggy
CSS Grid Garden

Personer att följa

Rachel Andrew
Jen Simmons