[{"data":1,"prerenderedAt":171},["ShallowReactive",2],{"blog-de-css-grid-modern-layout":3},{"id":4,"title":5,"body":6,"cover":155,"date":156,"description":157,"draft":158,"extension":159,"locale":160,"meta":161,"navigation":162,"path":163,"seo":164,"stem":165,"tags":166,"__hash__":170},"blog\u002Fblog\u002Fde\u002Fcss-grid-modern-layout.md","CSS Grid und das Ende der Layout-Hacks",{"type":7,"value":8,"toc":151},"minimark",[9,18,23,31,121,128,132,135,141,144,147],[10,11,12,13,17],"p",{},"Ich habe Jahre damit verbracht, Layouts zu bauen, die eigentlich gar keine Layouts waren — sondern clevere Notlösungen. Floats, die geräumt werden mussten. Clearfix-Hacks. Spalten, die mit ",[14,15,16],"code",{},"display: table"," so taten, als wären sie ein Raster. Heute kann ich sagen: Diese Zeit ist vorbei. CSS Grid ist in allen großen Browsern zuverlässig nutzbar, und es verändert, wie ich über Gestaltung im Web nachdenke.",[19,20,22],"h2",{"id":21},"vom-workaround-zum-echten-werkzeug","Vom Workaround zum echten Werkzeug",[10,24,25,26,30],{},"Flexbox war ein Segen — aber Flexbox ist eindimensional. Es ordnet Dinge in einer Reihe oder einer Spalte. Sobald ich zwei Dimensionen gleichzeitig brauchte, begann das Schachteln und Tricksen. Grid denkt von Anfang an in Zeilen ",[27,28,29],"em",{},"und"," Spalten.",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-css shiki shiki-themes github-light github-dark",".layout {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 1.5rem;\n}\n","css","",[14,39,40,53,69,99,115],{"__ignoreMap":37},[41,42,45,49],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sScJk",".layout",[41,50,52],{"class":51},"sVt8B"," {\n",[41,54,56,60,63,66],{"class":43,"line":55},2,[41,57,59],{"class":58},"sj4cs","  display",[41,61,62],{"class":51},": ",[41,64,65],{"class":58},"grid",[41,67,68],{"class":51},";\n",[41,70,72,75,77,80,83,86,89,92,96],{"class":43,"line":71},3,[41,73,74],{"class":58},"  grid-template-columns",[41,76,62],{"class":51},[41,78,79],{"class":58},"repeat",[41,81,82],{"class":51},"(",[41,84,85],{"class":58},"12",[41,87,88],{"class":51},", ",[41,90,91],{"class":58},"1",[41,93,95],{"class":94},"szBVR","fr",[41,97,98],{"class":51},");\n",[41,100,102,105,107,110,113],{"class":43,"line":101},4,[41,103,104],{"class":58},"  gap",[41,106,62],{"class":51},[41,108,109],{"class":58},"1.5",[41,111,112],{"class":94},"rem",[41,114,68],{"class":51},[41,116,118],{"class":43,"line":117},5,[41,119,120],{"class":51},"}\n",[10,122,123,124,127],{},"Plötzlich kann ich ein Raster beschreiben, statt es zu erschummeln. Und mit ",[14,125,126],{},"grid-template-areas"," lese ich mein Layout fast wie eine kleine Karte des Designs.",[19,129,131],{"id":130},"editorial-denken-nicht-in-boxen","Editorial denken, nicht in Boxen",[10,133,134],{},"Was mich wirklich begeistert, ist die gestalterische Freiheit. Endlich lassen sich Layouts bauen, die sich nach Magazin anfühlen — überlappende Elemente, asymmetrische Raster, Inhalte, die bewusst aus der Reihe tanzen. Dinge, die im Print selbstverständlich waren und im Web jahrelang mühsam blieben.",[136,137,138],"blockquote",{},[10,139,140],{},"Layout ist kein technisches Problem mehr, das es zu lösen gilt. Es ist wieder eine gestalterische Entscheidung.",[10,142,143],{},"Für mich als jemand, der zwischen Design und Entwicklung lebt, ist das der eigentliche Gewinn. Ich muss meine Ideen nicht mehr an dem ausrichten, was technisch gerade so geht. Ich kann das Layout entwerfen, das die Inhalte verdienen, und Grid trägt es.",[10,145,146],{},"Ein letzter Gedanke: Grid ersetzt Flexbox nicht, es ergänzt es. Grid für das große Ganze, Flexbox für die Feinheiten innerhalb der Komponenten. Zusammen geben sie mir endlich das Werkzeug, von dem ich seit Jahren geträumt habe — und ich merke, wie meine Entwürfe wieder mutiger werden.",[148,149,150],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":37,"searchDepth":55,"depth":55,"links":152},[153,154],{"id":21,"depth":55,"text":22},{"id":130,"depth":55,"text":131},null,"2019-05-12","CSS Grid ist endlich zuverlässig in allen Browsern angekommen — und befreit das Web-Layout von Float-Tricks und Flexbox-Verrenkungen.",false,"md","de",{},true,"\u002Fblog\u002Fde\u002Fcss-grid-modern-layout",{"title":5,"description":157},"blog\u002Fde\u002Fcss-grid-modern-layout",[167,168,169],"CSS","Layout","Design","SqE1kWsrJ8tV3z_pHDFBOwKJyp9XWfWPLvJKoTtp9sE",1781596070818]