CSS-Grids

SCREENGUIDE - - Inneres - TEXT: Jens Grocht­dreis

Zwei­di­men­sio­na­le Lay­outs für mo­der­ne Brow­ser

Erst seit Kur­zem gibt es mit Flex­box ein ers­tes ech­tes Lay­out­mo­dul in CSS. Bis­lang be­hal­fen sich Web­wor­ker mit Tech­ni­ken, die für Sei­ten­lay­outs nur be­dingt ge­eig­net und nie ge­dacht wa­ren. Mit CSS-Grids wird nun so­gar die zwei­te Lay­out­tech­nik von al­len mo­der­nen Brow­sern un­ter­stützt. Der Be­griff „Grid” ist schon lan­ge in der Front­end-Ent­wick­lung be­kannt. Er be­zeich­net die Ver­tei­lung von In­hal­ten nach ei­nem un­sicht­ba­ren Ras­ter (engl.: grid, Abb. 1). Die­se Ver­tei­lung wird bis­lang üb­li­cher­wei­se mit­tels Floats rea­li­siert. Ins­be­son­de­re das Grid von Boot­strap hat dies­be­züg­lich Be­kannt­heit und ei­ne gro­ße Nut­zer­schar er­langt. Floats wa­ren al­ler­dings nie­mals für Sei­ten­lay­outs vor­ge­se­hen. Sie wer­den nur man­gels bes­se­rer Al­ter­na­ti­ven am häu­figs­ten ge­nutzt. Al­ter­na­tiv kom­men ge­le­gent­lich auch ab­so­lu­te Po­si­tio­nie­rung oder „dis­play: in­li­ne-block” zum Ein­satz. Als 2011 mit der Spe­zi­fi­ka­ti­on des „CSS Grid Lay­out” be­gon­nen wur­de, hat­ten Web­wor­ker schon Er­fah­run­gen mit teils kom­pli­zier­ten Lay­outs ge­macht. Es wa­ren auch Li­mi­tie­run­gen der bis­lang ver­wen­de­ten Tech­ni­ken be­kannt.

AN­DE­RE HER­AN­GE­HENS­WEI­SE

Wie schon bei Flex­box ha­ben wir es bei CSS-Grids mit ei­ner an­de­ren als der ge­wohn­ten Her­an­ge­hens­wei­se und Bena­mung zu tun. Bis­lang wa­ren wir es ge­wohnt, mit links, rechts, oben und un­ten zu ar­bei­ten. Schon bei Flex­box wur­de die­ses Sche­ma durch zwei Ach­sen er­setzt, die man in der Rich­tung dre­hen konn­te. Bei den CSS-Grids wer­den die ein­zel­nen Lay­out­blö­cke Grid-Items ge­nannt. Der sie um­ge­ben­de Con­tai­ner ist der Grid-Con­tai­ner. Das Grid wird durch­zo­gen von Grid-Li­nes, al­so Li­ni­en, die die Grid-Items um­ge­ben. Die­se Li­ni­en wer­den im Grid-In­spec­tor von Fi­re­fox (Teil der De­ve­l­oper Tools) vi­sua­li­siert (Abb. 2). Sie se­hen in die­sem Bei­spiel, dass auch die äu­ße­ren En­den des Grids im­mer mit Li­ni­en ver­se­hen sind. Es exis­tiert des­halb im­mer ei­ne Li­nie mehr als Rei­hen oder Spal­ten.

Im Ge­gen­satz zu Flex­box, das im­mer ein­di­men­sio­nal ar­bei­tet, wird bei Grids von Spal­ten und Rei­hen ge­spro­chen, ganz wie bei Ta­bel­len. Ei­ne Rei­he oder ei­ne Spal­te, al­so der Be­reich zwi­schen zwei Grid-Li­nes, wird auch als Grid-Track be­zeich­net. Die kleins­te Ein­heit, ver­gleich­bar mit ei­ner ein­zel­nen Ta­bel­len­zel­le, ist die Grid-Cell. Und ein Be­reich aus ei­ner oder meh­re­rer Grid-Zel­len, die zu­sam­men von vier Grid-Li­nes be­grenzt wer­den, ist ei­ne (im­mer recht­ecki­ge) Grid-Area. Ein Grid-Item ist im­mer Teil ei­ner Grid-Area. Ein ent­schei­den­der Un­ter­schied zwi­schen CSS-Grids und Flex­box ist, dass die Grids zwei­di­men­sio­nal kon­stru­iert sind. Even­tu­ell macht die Spe­zi­fi­ka­ti­on des­halb sprach­li­che An­lei­hen an Ta­bel­len. Flex­box ist hin­ge­gen ein­di­men­sio­nal. Um dies zu un­ter­strei­chen, spricht die Spe­zi­fi­ka­ti­on nur von Haupt- und Kreu­zach­se, nutzt al­so ei­ne recht neu­tra­le Spra­che.

EIN GRID ER­STEL­LEN

Durch die Zu­wei­sung von „dis­play: grid;” an den Grid-Con­tai­ner wer­den des­sen di­rek­te Kind­ele­men­te au­to­ma­tisch zu Gri­dI­tems. Die­ses Prin­zip ken­nen Sie be­stimmt schon von Flex­box. Zu­sätz­lich wird die Art des Ras­ters am Grid-Con­tai­ner be­stimmt. Sie müs­sen al­so noch die Brei­te und An­zahl der Spal­ten (gridtem­pla­te-co­lumns) und even­tu­el­le Zwi­schen­räu­me (grid-gap) de­fi­nie­ren. Der Code für ein ers­tes Grid könn­te fol­gen­der­ma­ßen aus­se­hen [cd­pn.io/e/mpVjGQ]. Al­le Bei­spie­le aus die­sem Ar­ti­kel fin­den Sie auch ge­sam­melt in ei­ner Co­de­pen-Collec­tion [co­de­pen.io/collec­tion/nbgxgq].

Durch grid-tem­pla­te-co­lumns wird hier ein vier­spal­ti­ges Lay­out de­fi­niert, des­sen Spal­ten je­weils 100 px breit sind. Mit je­dem fünf­ten Grid-Item in­ner­halb des Con­tai­ners wird im Lay­out ei­ne

neue Zei­le er­öff­net. Da­für müs­sen kei­ne neu­en Grid-Con­tai­ner er­stellt wer­den. Sie wer­den erst dann not­wen­dig, wenn sich die Art des Lay­outs än­dert, al­so die Brei­ten und die An­zahl der Spal­ten. Um die Spal­ten nicht di­rekt an­ein­an­der­kle­ben zu las­sen, emp­fiehlt es sich, ei­nen Ab­stand zwi­schen Spal­ten und Zei­len zu de­fi­nie­ren. Mit grid-row-gap und grid-co­lumn-gap kön­nen Sie ei­ne ex­pli­zi­te Steue­rung vor­neh­men. Ein­fa­cher ist es, wenn es das Lay­out ge­stat­tet, mit der Kurz­schreib­wei­se grid-gap. Da­mit kön­nen Sie den glei­chen Ab­stand so­wohl für die Spal­ten als auch für die Zei­len de­fi­nie­ren. Aber auch in der Kurz­schreib­wei­se kön­nen Sie un­ter­schied­li­che Wer­te trans­por­tie­ren. Der ers­te Wert be­zieht sich auf die Zei­len, der zwei­te auf die Spal­ten: Die äu­ße­ren Rän­der des Grids wer­den da­bei nicht in die Be­rech­nung der grid-gaps ein­be­zo­gen. Der Zwi­schen­raum zwi­schen Spal­ten und Zei­len be­ginnt erst zwi­schen der ers­ten und zwei­ten Zei­le bzw. Spal­te und en­det vor der je­weils letz­ten.

In die­sen ers­ten Bei­spie­len wer­den ab­so­lu­te Brei­ten ge­nutzt. Das ist selbst­ver­ständ­lich mög­lich, in Zei­ten ei­ner un­über­sicht­li­chen End­ge­rä­teviel­falt aber eher hin­der­lich. Für die Er­stel­lung re­s­pon­siver Lay­outs sind des­halb re­la­ti­ve Brei­ten­an­ga­ben wie em oder vw sinn­vol­ler.

Mit dem Grid-Mo­dul wird ei­ne neue re­la­ti­ve Ein­heit ein­ge­führt: frac­tion (fr). Mit­tels „frac­tion” wird der zur Ver­fü­gung ste­hen­de Platz auf­ge­teilt. Sie kön­nen sich dies wie die Por­tio­nie­rung ei­nes Ku­chens vor­stel­len (ei­ne ge­naue­re Be­trach­tung die­ser neu­en Ein­heit folgt wei­ter un­ten). Im fol­gen­den Bei­spiel wird ein Grid-Con­tai­ner in vier gleich gro­ße Stü­cke auf­ge­teilt [cd­pn. io/e/WdrgJp]:

Selbst­ver­ständ­lich kön­nen Sie auch Ein­hei­ten mi­schen [cd­pn. io/e/Vy­eGxJ]. Sol­che ge­misch­ten An­ga­ben kön­nen bei Sei­ten­lay­outs sinn­voll sein, die Wer­be­ban­ner be­inhal­ten. Die tra­di­tio­nel­len Bann­er­forma­te sind üb­li­cher­wei­se nicht re­s­pon­siv, so­dass ei­ne Wer­be­spal­te mit fi­xer Brei­te die rich­ti­ge Lö­sung im CSS-Grid wä­re.

Wenn Sie dem Grid-Con­tai­ner „dis­play: in­li­ne-grid;” zu­wei­sen, wird das Grid als In­li­ne-Ele­ment er­stellt. Es pro­du­ziert al­so kei­nen Ab­satz um sich her­um. Auch bei Flex­box gibt es ei­ne In­li­neVa­ri­an­te. De­ren sinn­vol­ler Ein­satz­zweck dürf­te sich auf Such­for­mu­la­re in Na­vi­ga­ti­ons­leis­ten be­schrän­ken.

Ne­ben den Spal­ten kön­nen Sie selbst­ver­ständ­lich auch die Zei­len ei­nes Lay­outs de­fi­nie­ren:

In die­sem Fal­le be­kom­men die ers­ten bei­den mög­li­chen vi­su­el­len Zei­len ei­ne Hö­he [cd­pn.io/e/Wd­wRXB]. Die Hö­he der wei­te­ren Zei­len rich­tet sich dann nach dem höchs­ten Ele­ment in der je­wei­li­gen Zei­le.

Auch für grid-tem­pla­te-co­lumns und grid-tem­pla­te-rows gibt es ei­ne Kurz­schreib­wei­se, im fol­gen­den Bei­spiel nur für die Spal­ten de­mons­triert:

Die re­peat-Syn­tax ist denk­bar ein­fach: In­ner­halb des Klam­mer­aus­drucks wird zu­erst die An­zahl der Wie­der­ho­lun­gen no­tiert und da­nach, mit ei­nem Kom­ma ge­trennt, das zu wie­der­ho­len­de Mus­ter. Bei .grid-1 wer­den vier gleich brei­te Spal­ten kon­stru­iert. Bei .grid-2 wer­den zwei un­ter­schied­lich brei­te Spal­ten er­stellt und die­se ein­mal wie­der­holt. Und bei .grid-3 wird erst ei­ne Spal­te von 150 px Brei­te kon­stru­iert, da­nach fol­gen drei gleich brei­te Spal­ten [cd­pn.io/e/ZvWaNp]. Sie kön­nen nun mit sehr we­nig Code das Boot­strap-Grid (12 Spal­ten) nach­bau­en [cd­pn.io/e/ LeRPrK]:

DIE EIN­HEIT FRAC­TION

Ei­ne ech­te Neue­rung im CSS-Grid-Mo­dul ist die Ein­heit frac­tion. Sie er­mög­licht die Ver­tei­lung von In­hal­ten auf den üb­rig ge­blie­be­nen Platz. Die Ein­heit funk­tio­niert ana­log zu den Flex­box-Ei­gen­schaf­ten flex-grow und flex-shrink. Mit die­sen Ein­hei­ten wird Flex-Items ein Hin­weis ge­ge­ben, in wel­chem Ver­hält­nis zu­ein­an­der sie wach­sen oder schrump­fen dür­fen. Lei­der sind die­se Wer­te oh­ne Ein­heit, ein Feh­ler in der Flex­box-Spe­zi­fi­ka­ti­on, den das W3C heute zu­gibt.

Im Ge­gen­satz zu den Flex­box-Ei­gen­schaf­ten kön­nen Frac­tions auch Kom­ma­wer­te ent­hal­ten. Das ha­ben ent­spre­chen­de Tests in den Brow­sern Chro­me und Fi­re­fox er­ge­ben. Denn lei­der wird die­se Op­ti­on we­der in der Spe­zi­fi­ka­ti­on ex­pli­zit er­wähnt noch spre­chen die vie­len Ar­ti­kel dar­über. Al­ler­dings blei­ben Sie bes­ser bei ganz­zah­li­gen Wer­ten in Ih­ren Grids, das ist sinn­vol­ler und in­tui­ti­ver. Der gro­ße Vor­teil der Ein­heit fr ge­gen­über den alt­be­kann­ten Pro­zent­wer­ten er­schließt sich an ei­nem ein­fa­chen Bei­spiel sehr schnell:

Die Con­tai­ner sind in bei­den Co­de­bei­spie­len gleich­mä­ßig in vier Spal­ten auf­ge­teilt. Stör­fak­tor ist im Bei­spiel mit den Pro­zent­wer­ten (.grid-pro­zent) al­ler­dings die Ein­heit „grid-gap”. Sie de­fi­niert den ho­ri­zon­ta­len und ver­ti­ka­len Ab­stand zwi­schen den Grid-Items. So kä­men zu den 100 % Spal­ten­brei­te beim ers­ten Co­de­bei­spiel noch 60 px Ab­stand zwi­schen den vier Spal­ten hin­zu. Der Brow­ser wür­de ei­nen ho­ri­zon­ta­len Scroll­bal­ken zei­gen.

Die Frac­tion-Ein­heit funk­tio­niert hier an­ders. Der Brow­ser schaut erst, wel­che Brei­ten (oder Hö­hen) fest ver­ge­ben sind und wel­cher Platz üb­rig bleibt. Die­sen ver­blei­ben­den Platz ver­teilt der Brow­ser dann nach dem Schlüs­sel, den der Web­wor­ker mit den fr-Ein­hei­ten ver­gibt. Im zwei­ten Bei­spiel (.grid-fr) wür­de der Brow­ser al­so erst ein­mal den Raum zwi­schen den Spal­ten von der Ge­samt­brei­te ab­zie­hen. Den Rest wür­de der Brow­ser gleich­mä­ßig zu vier Tei­len zwi­schen den Grid-Items ver­tei­len. Selbst­ver­ständ­lich kann der Platz auch un­gleich ver­teilt wer­den.

Das Bei­spiel mit den Pro­zent­wer­ten müss­te der Web­wor­ker mit­tels calc() fol­gen­der­ma­ßen kor­ri­gie­ren [cd­pn.io/e/vpKxNa]:

Die drei Ab­stän­de zu je 20 Pi­xel sor­gen im Bei­spiel mit .grid­pro­zent für den er­wähn­ten ho­ri­zon­ta­len Scroll­bal­ken. Da­mit der Scroll­bal­ken ver­schwin­det, dür­fen die vier Spal­ten al­so nicht je­weils 25 % breit wer­den. Der Web­wor­ker muss die ge­sam­ten 60 Pi­xel für die Ab­stän­de auf die Brei­ten der vier Spal­ten um­rech­nen. Bei je­der Spal­te müs­sen da­her 15 Pi­xel ab­ge­zo­gen wer­den, so­dass sich die 60 Pi­xel aus­glei­chen. Die­se Vor­ge­hens­wei­se ist um­ständ­lich, schlecht les­bar und feh­ler­an­fäl­lig. Der Web­wor­ker muss un­nö­tig rum­rech­nen. Schnel­ler und ele­gan­ter geht es mit der Lö­sung über fr. Das Er­geb­nis ist das glei­che.

Selbst­ver­ständ­lich kann die Ein­heit fr mit an­de­ren Ein­hei­ten ver­mischt wer­den. Es geht schließ­lich hier­bei in ge­wis­ser Wei­se um „Res­te­ver­wer­tung” [cd­pn.io/e/vpKxNa].

MINMAX

Für fle­xi­ble, re­s­pon­sive Lay­outs kann es manch­mal wich­tig sein, ei­ne mi­ni­ma­le und ei­ne ma­xi­ma­le Brei­te – re­spek­ti­ve Hö­he – an­ge­ben zu kön­nen. Bei der Grid-Spe­zi­fi­ka­ti­on wur­de dar­an ge­dacht und die Funk­ti­on minmax() ein­ge­führt. Schau­en wir uns zwei Bei­spie­le an. Im ers­ten Bei­spiel bleibt die ers­te Spal­te 150 px breit, die drit­te und vier­te be­kom­men glei­cher­ma­ßen ei­ne Frac­tion vom Rest. Und die zwei­te Spal­te soll min­des­tens 80 px breit sein, darf aber ma­xi­mal zwei Frac­tions breit wer­den:

Im ent­spre­chen­den Co­de­pen-Bei­spiel kön­nen Sie mit­tels ein­fa­cher But­tons die Brei­te des Grids ver­än­dern [cd­pn.io/e/jYrLyP]. Da­bei se­hen Sie dann, wie sich der zwei­te Con­tai­ner an die Ge­ge­ben­hei­ten an­passt.

Grids kön­nen Sie auch in der Hö­he fle­xi­bel be­gren­zen. Im Co­de­pen-Bei­spiel ist ein Blind­text ver­steckt [cd­pn.io/e/BJzwBj]. Durch Klick auf den But­ton kön­nen Sie ihn er­schei­nen und wie­der ver­schwin­den las­sen. Die zwei­te Zei­le ver­än­dert da­durch ih­re Hö­he. Die Be­din­gun­gen da­für sind fol­gen­der­ma­ßen ge­setzt:

In der Funk­ti­on minmax() darf die Ein­heit fr nur als Ma­xi­mal­wert, nicht als Mi­ni­mal­wert ein­ge­setzt wer­den. Schließ­lich ist fr ein re­la­ti­ver Wert. Ein de­fi­ni­ti­ver Mi­ni­mal­wert lie­ße sich da­mit nie er­stel­len. Zu­sätz­lich gibt es noch die Schlüs­sel­be­grif­fe au­to, min-con­tent und max-con­tent. Mit min-con­tent ist die Min­dest­brei­te ge­meint, die der In­halt be­nö­tigt. Al­so bspw. ei­ne Bild­brei­te oder das längs­te Wort in ei­nem Text. Mit max-con­tent ist dem­ent­spre­chend das Ma­xi­mum des für den In­halt not­wen­di­gen Plat­zes ge­meint. Für den Ma­xi­mal­wert, al­so den zwei­ten Wert in der minmax()-Funk­ti­on, sind max-con­tent und au­to iden­tisch. So er­ge­ben sich fol­gen­de Va­ri­an­ten:

AUTOFIT UND AUTOFILL

Der ers­te Pa­ra­me­ter der re­peat()-Funk­ti­on ist die An­zahl der Wie­der­ho­lun­gen des dar­auf­fol­gen­den Brei­ten-Mus­ters. An­statt ei­nen kon­kre­ten Wert ein­zu­ge­ben, kön­nen Sie auch die Schlüs­sel­wor­te au­to-fit und au­to-fill be­nut­zen.

Mit dem Schlüs­sel­wort au­to-fill ver­sucht der Brow­ser, so vie­le Grid-Items wie mög­lich in ei­ne vi­su­el­le Zei­le zu be­kom­men. Er rich­tet sich da­nach an der an­ge­ge­be­nen Mi­ni­mal­grö­ße aus. Even­tu­ell frei blei­ben­der Platz wird nicht ge­füllt. Auch bei au­to-fit ver­sucht der Brow­ser, den Platz, so gut es geht, mit Grid-Items zu fül­len. Hier bleibt kein frei­er Platz üb­rig [cd­pn.io/e/xpOv­mW].

ARE­AS DE­FI­NIE­REN

Den ein­zel­nen Zel­len ei­nes Grids kön­nen Web­wor­ker mit der Ei­gen­schaft grid-tem­pla­te-are­as ei­nen Na­men zu­wei­sen. Da­bei kön­nen ein­fa­che Buch­sta­ben ge­nau­so ver­wen­det wer­den wie gan­ze Wör­ter. Im fol­gen­den Bei­spiel wer­den die Zel­len ei­nes 3x3-Ras­ters mit Na­men ver­se­hen. Glei­che Na­men sor­gen da­für, dass die Zel­len ei­ne Grid-Area bil­den. Da­bei müs­sen die Are­as Recht­ecke er­ge­ben. Die Ei­gen­schaft grid-area ist nur die Kurz­schreib­form für grid-row-start, grid-row-end bzw. grid-co­lumn­start und grid-co­lumn-end. Die Ori­en­tie­rung hält sich al­so im­mer in ei­ner vi­su­el­len Zei­le oder Spal­te. Des­halb ist es nicht mög­lich, ein Grid-Item in ei­ner L-Form in­ner­halb ei­nes Grids zu plat­zie­ren. Die­se Ei­gen­schaf­ten wer­den üb­ri­gens vom IE nicht un­ter­stützt, egal ob nun mit oder oh­ne ex­pli­zi­ten Na­men.

Nach­dem die Be­rei­che des Grids be­nannt wor­den sind, müs­sen die­se noch mit In­hal­ten be­füllt wer­den. Da­zu kön­nen Sie Ih­re In­hal­te nun be­quem an­hand der Na­men der Are­as ver­tei­len.

Der char­man­te Ne­ben­ef­fekt die­ser Tech­nik ist, dass die Darstel­lung der In­hal­te un­ab­hän­gig von der Co­de­rei­hen­fol­ge im HTML ist. Der Brow­ser weiß schließ­lich, wel­che Con­tai­ner in wel­chen Be­reich des Grids sol­len. Dies ist be­son­ders prak­tisch für un­ter­schied­li­che Bre­ak­points ei­ner re­s­pon­siven Web­site [cd­pn.io/e/ Gy­jpMM]. Be­ach­ten Sie, dass die An­zahl der Na­men mit der An­zahl der zur Ver­fü­gung ste­hen­den Grid-Items pro vi­su­el­ler Zei­le über­ein­stim­men muss. Even­tu­ell ge­wünsch­te Aus­las­sun­gen wer­den mit ei­nem Punkt rea­li­siert: Der krea­ti­ve Um­gang mit ben­am­ten Grid-Are­as kann zu in­ter­es­san­ten Lay­out­lö­sun­gen füh­ren, wie in die­sem Schau­bild von @css­grid [cd­pn.io/e/EgNXyo]. Der da­hin­ter ste­hen­de Code ist ge­kürzt fol­gen­der. Der Au­tor mar­kiert die Aus­las­sun­gen in die­sem Bei­spiel mit zwei Punk­ten. Auf die­se Wei­se kön­nen Sie sehr ein­fach ei­nen Con­tai­ner über meh­re­re Spal­ten und Zei­len ver­tei­len so­wie mit Aus­las­sun­gen ge­stal­ten. Aus­las­sun­gen wer­den ei­gent­lich mit ei­nem Punkt ge­kenn­zeich­net. Wenn Sie aus op­ti­schen Grün­den meh­re­re Punk­te nut­zen möch­ten, kön­nen Sie dies tun, so­lan­ge sich kein Leer­raum zwi­schen den Punk­ten be­fin­det. Ein Leer­schritt wür­de den Über­gang in ei­ne neue Zel­le mar­kie­ren.

BROW­SER-SUP­PORT

Die wohl span­nends­ten Fra­gen im Zu­sam­men­hang mit je­der neu­en Tech­nik dre­hen sich um die Un­ter­stüt­zung in mo­der­nen Brow­sern und um den Um­gang mit den al­ten Brow­sern. Denn schließ­lich er­hal­ten die IT-Ab­tei­lun­gen gro­ßer Kon­zer­ne und Be­hör­den (aber auch vie­le klei­ne Mit­tel­ständ­ler) al­te In­ter­net Ex­plo­rer am Le­ben. Oder sie nut­zen ei­nen spe­zi­el­len Fi­re­fox, der nur je­des vier­te Re­lease mit­macht und ein Up­date be­kommt. An­fang 2017 ha­ben zu­erst Mo­zil­la, das Blink-Pro­jekt (Chro­me, Ope­ra, Vi­val­di) und das Web­kit-Pro­jekt (Sa­fa­ri) CSS-Grids in ih­re Brow­ser in­te­griert. Kur­ze Zeit spä­ter zog Mi­cro­soft mit Edge

Abb. 1: Die ver­ti­ka­len, grau­en Bal­ken stel­len das Grid dar, das im Hin­ter­grund exis­tiert. Die In­hal­te wer­den mit­tels Floats dar­auf plat­ziert.

Abb. 2: Sie müs­sen im Grid-In­spec­tor erst aus­wäh­len, für wel­chen Grid-Con­tai­ner der In­spec­tor die Mar­kie­run­gen an­zei­gen soll.

Abb. 3: Die schwar­zen Ele­men­te sym­bo­li­sie­ren die je­wei­li­gen Be­grif­fe.

Abb. 4: Die au­to-fill-Ei­gen­schaft im Ein­satz

Abb. 5: Die au­to-fit-Ei­gen­schaft im Ein­satz

Abb. 8: Ei­ne in­ter­es­san­te Na­vi­ga­ti­ons­idee dank CSS-Grids

Abb. 6: Die In­hal­te sind den pas­sen­den Grid-Are­as zu­ge­wie­sen.

Abb. 7: Die rech­te Zel­le des Fu­ßes wur­de aus­ge­las­sen.

Newspapers in German

Newspapers from Germany

© PressReader. All rights reserved.