CSS GRID LAYOUTCSS GRID LAYOUTund wie es in der Praxis funktioniertund wie es in der Praxis funktioniert

#CONTAOKONFERENZ18 – JANOSCH OLTMANNS#CONTAOKONFERENZ18 – JANOSCH OLTMANNS

ROADMAPROADMAPHintergrund-Theorie»Container-Eigenschaften»Zell-Eigenschaften»Vor- und Nachteile»Live-Einsatz»…»

Janosch OltmannsJanosch Oltmanns

#Frontend #Performance

#Online-Software-Entwicklung #Agile Prozesse#Münsterland

THEORIETHEORIE

GRID GRID UND/ODERUND/ODER FLEXBOX FLEXBOXFlexboxFlexbox

CSS Grid LayoutCSS Grid Layout

eindimensional (horizontal oder vertikal)»

zweidimensional (horizontal und vertikal)»

BEGRIFFE (TERMINOLOGY)BEGRIFFE (TERMINOLOGY)

GRID CONTAINERGRID CONTAINERDas Element, auf das display:grid; angewendet

wird.Der umgebende Container.

GRID ITEMGRID ITEMDie Kind-Elemente des Grid-Containers.

GRID LINEGRID LINEDie virtuellen Trennlinien an jeder Seite einer

Spalte oder Zeile.Können sowohl vertikal als auch horizontal sein.

GRID TRACKGRID TRACKDer Bereich zwischen zwei Grid-Lines

GRID CELLGRID CELLDer Bereich der eine einzelne Zelle bildet, also von

4 Grid-Lines eingeschlossen wird.

GRID AREAGRID AREADer Bereich eines Grids, der aus mehreren Grid

Cells bestehen kann und eine zusammenhängendeEinheit bildet.

BEGRIFFEBEGRIFFEGrid Container»Grid Item»Grid Line»Grid Track»Grid Cell»Grid Area»

Ein Grid lässt sich immer für ein Element und diedirekten Kind-Elemente de�nieren.

<div class="wrapper"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div></div>

<div class="wrapper"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div></div>

.wrapper:before { content: ''; } .wrapper:after { content: ''; }

GENERELLEGENERELLEFUNKTIONSWEISEFUNKTIONSWEISE

<div class="wrapper"> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div> <div class="cell"></div></div>

.wrapper { display: grid; }

.wrapper-001 { }

.child-002-a .child-002-b .child-002-c

.child-002-d .child-002-e .child-002-f

.wrapper-002 { }

.wrapper-003 { }

.child-004-a .child-004-b .child-004-c

.child-004-d .child-004-e .child-004-f

.child-004-a { }

ABSTÄNDEABSTÄNDE

.wrapper-008 { }

BENANNTE GRIDLINIENBENANNTE GRIDLINIEN

.child-010-a

.child-010-b

.child-010-c

.child-010-d

.child-010-e

.child-010-f

.wrapper-010 { }

BENANNTE GRID-BEREICHEBENANNTE GRID-BEREICHE

.child-011-a

.child-011-b

.child-011-c

.child-011-d

.child-011-e

.child-011-f

.wrapper-011 { }

Container EigenschaftenContainer Eigenschaften.wrapper { display:grid; grid-template-columns: <track-size> ... | <line-name> <track-size> ...; grid-template-rows: <track-size> ... | <line-name> <track-size> ...; grid-template-areas: "<grid-area-name> | . | none | ..." "..."; grid-row-gap: <line-size>; grid-column-gap: <line-size>; justify-items: start | end | center | stretch; align-items: start | end | center | stretch; }

Zell EigenschaftenZell Eigenschaften.cell { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto; grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; }

VOR- UND NACHTEILEVOR- UND NACHTEILE

EINFACHER RESPONSIVEREINFACHER RESPONSIVERAUFBAUAUFBAU

<div class="wrapper"> <div class="main-head">## Header ##</div> <div class="navigation">## Navigation</div> <div class="content">## Content ##</div> <div class="side">## Sidebar ##</div> <div class="ad">## Advertising ##</div> <div class="main-footer">## Footer ##</div></div>

## Header ##

## Navigation

## Content ##

## Sidebar ##

## Advertising ##

## Footer ##

.wrapper { grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer"; }

## Header ##

## Navigation

## Content ## ## Sidebar##

##Advertising

##

## Footer ##

.wrapper { grid-template-columns: 3fr 1f grid-template-areas: "header header" "nav nav" "content sidebar" "content ad" "footer footer"; }

## Header ##

##Navigation

## Content ## ## Sidebar##

##Advertising

##

## Footer ##

.wrapper { grid-template-columns: 1fr 4f grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer" }

LIVE-EINSATZLIVE-EINSATZ

BROWSER SUPPORTBROWSER SUPPORT

FEATURE QUERIESFEATURE QUERIES @supports (display: grid) { .wrapper { /* grid anweisungen */ } }

FALLBACK-EIGENSCHAFTENFALLBACK-EIGENSCHAFTEN

müssen nicht resettet werden

float»display: inline-blockdisplay: table-cell

»

vertical-align»column-*»

RESSOURCENRESSOURCENcss-tricks.com/snippets/css/complete-guide-grid/

»

www.smashingmagazine.com/category/css-grid»developer.mozilla.org/de/docs/Web/CSS/CSS_Grid_Layout

»

gridbyexample.com/»

CSS GRID GARDENCSS GRID GARDEN

VIEL SPASS MIT DEM CSSVIEL SPASS MIT DEM CSSGRID LAYOUTGRID LAYOUT

UNDUND

VIELEN DANK!VIELEN DANK!