Web­de­sign: CSS to­tal

Ob Flex­box oder Grid, mit bei­den Css-spe­zi­fi­ka­tio­nen las­sen sich wun­der­bar ein­falls­rei­che und un­ge­wöhn­li­che Web­site-lay­outs ent­wi­ckeln – die Mög­lich­kei­ten sind na­he­zu gren­zen­los

PAGE - - Inhalt -

End­lich freie Lay­outs! Wel­che Mög­lich­kei­ten die CSSSpe­zi­fi­ka­tio­nen Flex­box und Grid fürs Web­de­sign bie­ten

● Schluss mit lang­wei­li­gen Web­sites, die schon seit Jah­ren dem im­mer glei­chen Sche­ma fol­gen: He­a­der, Käst­chen, Spal­ten, Foo­ter. Schon die Ein­füh­rung des CSS Fle­xi­ble Box Lay­out Mo­du­les (kurz: Flex­box) im Jahr 2017 er­öff­ne­te end­lich ei­ne ernst zu neh­men­de Lay­out­tech­nik mit­tels Cas­ca­ding Style Sheets, die auch die Gestal­tung re­s­pon­siver Web­sites be­rück­sich­tig­te. Denn die An­ord­nung von Ele­men­ten in ei­ner Rei­he oder Spal­te ließ sich bis­lang le­dig­lich mit der Css-ei­gen­schaft float rea­li­sie­ren, die ei­gent­lich nur da­zu ge­dacht war, Text an ei­nem Bild oder an­de­ren Lay­out-ele­men­ten ent­lang­lau­fen zu las­sen. Float für um­fang­rei­che Sei­ten­lay­outs qua­si zweck­zu­ent­frem­den, er­wies sich in den meis­ten Fäl­len als un­be­frie­di­gend und warf Pro­ble­me auf: Da­zu ge­hört zum Bei­spiel die Fra­ge, wie man ein un­ge­woll­tes Fort­füh­ren des Floa­tings un­ter­bin­det. Kein Wun­der, denn die Floa­ting-tech­nik wur­de nicht für die Kon­struk­ti­on kom­ple­xer Lay­outs ent­wi­ckelt.

Flex­box gab uns end­lich ei­ne ei­gen­stän­di­ge Mög­lich­keit, Ele­men­te ne­ben­ein­an­der oder un­ter­ein­an­der an­zu­ord­nen. Aber nicht nur das – es lässt sich auch in­di­vi­du­ell fest­le­gen, ob die Ele­men­te in ei­ner Rei­he oder Spal­te ste­hen oder auf meh­re­re Zei­len be­zie­hungs­wei­se Spal­ten um­ge­bro­chen wer­den. Ein wei­te­rer Vor­teil des Flex­box-mo­dells ist sei­ne An­pas­sungs­fä­hig­keit, was die Grö­ße der ein­zel­nen Ele­men­te be­trifft. Statt sämt­li­che Ele­men­te gleich groß zu ge­stal­ten, las­sen sie sich je nach Platz­an­ge­bot fle­xi­bel in ver­schie­de­nen Ab­mes­sun­gen dar­stel­len (sie­he das Mon­dri­an-bei­spiel oben), in­dem man die Wer­te für die mi­ni­ma­le oder ma­xi­ma­le Grö­ße ei­nes Ele­ments an­gibt.

Da­her eig­net sich Flex­box wun­der­bar, um li­nea­re Lay­outs wie Ga­le­ri­en oder Tea­ser für Ar­ti­kel oder das nach wie vor be­lieb­te Ka­chel­de­sign zu ge­stal­ten. Wann im­mer ei­ne be­lie­bi­ge An­zahl von Ele­men­ten in Rei­hen oder Spal­ten ste­hen soll, ist das Flex­box-mo­dell ge­nau der rich­ti­ge An­satz.

Ver­schach­tel­te Struk­tu­ren mit CSS Grid

Wirk­lich kom­ple­xe We­blay­outs las­sen sich aber we­der mit float- Gestal­tungs­ras­tern noch mit Flex­box per­fekt um­set­zen. Flex­box er­mög­licht es zwar, die Gestal­tung voll­stän­dig vom HTML- Co­de zu tren­nen, aber für ver­schach­tel­te Struk­tu­ren ist es un­ge­eig­net. Hier kommt CSS Grid ins Spiel, das »ech­te« Gestal­tungs­ras­ter auf Ba­sis von CSS er­mög­licht.

Man könn­te das Grid-mo­dell als ei­ne Art Er­satz für das Css-ta­bles-mo­dell be­trach­ten, das wie­der­um die Html-ta­bel­len ab­lös­te – Mit­te der 1990er Jah­re das ein­zi­ge Mit­tel, um halb­wegs an­spruchs­vol­le We­blay­outs zu er­stel­len. Bis­her fehl­te in CSS die Mög­lich­keit, Lay­outs mit­hil­fe ei­nes Ras­ters zu ent­wi­ckeln. Mit CSS Grid lässt sich end­lich ein Ras-

Mit CSS Grid lässt sich end­lich ein Ras­ter de­fi­nie­ren, das aus ver­schie­den brei­ten Spal­ten und un­ter­schied­lich ho­hen Rei­hen be­steht . . .

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.