imola: CSS Layouts (Grid and Flexbox) Implementation for R ...
CSS GRID L AYOUT - Contao · 2019-10-29 · GRID UND/ODER FLEXBOX Flexbox CSS Grid Layout »...
Transcript of CSS GRID L AYOUT - Contao · 2019-10-29 · GRID UND/ODER FLEXBOX Flexbox CSS Grid Layout »...
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!