[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"WjkqS26upHwymgzPtiC5Nep3YqwkzqG0gdsPzTL7IsE":75,"N5XEF33vMV4bzq1l08oMwN-zSAryHiP0w4mmeT8ASfQ":197,"_apollo:default":240},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":113,"postContentElements":13,"evergreen":13,"tags":138,"postWpBody":168,"wpHeaderImage":13,"wpHeaderImageOld":171,"wpHeaderImageOldSmall":182,"wpOgImage":13,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":190,"author":191},"NodeWpPost","854","CSS Grid",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1554795620,"UTC","+00:00","2019-04-09T07:40:20+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1502362514,"2017-08-10T10:55:14+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/css-grid",[94,101,108],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","CSS Grid | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/css-grid","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":114,"id":115,"name":116,"path":117,"status":20,"weight":118,"description":119,"langcode":123,"changed":124,"metatag":127},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":120,"processed":121,"format":122},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":125,"timezone":85,"offset":86,"time":126},1713772777,"2024-04-22T07:59:37+00:00",[128,131,135],{"__typename":95,"tag":96,"attributes":129},{"__typename":98,"name":99,"content":130},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":132},{"__typename":98,"name":133,"content":134},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":136},{"__typename":105,"href":137,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[139,144,148,152,156,160,164],{"__typename":140,"id":141,"name":142,"path":143,"weight":118},"TermTags","295","CSS","/tag/css",{"__typename":140,"id":145,"name":146,"path":147,"weight":118},"297","css3","/tag/css3",{"__typename":140,"id":149,"name":150,"path":151,"weight":118},"558","Grid","/tag/grid",{"__typename":140,"id":153,"name":154,"path":155,"weight":118},"597","Howto","/tag/howto",{"__typename":140,"id":157,"name":158,"path":159,"weight":118},"745","Layout","/tag/layout",{"__typename":140,"id":161,"name":162,"path":163,"weight":118},"1072","responsive","/tag/responsive",{"__typename":140,"id":165,"name":166,"path":167,"weight":118},"1256","Style","/tag/style",{"__typename":169,"processed":170,"format":122,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Cp> \u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Es gibt verschiedene Möglichkeiten Layouts mit CSS umzusetzen. In den Urzeiten nutzte man häufig Tabellen, dann lange Zeit Floats. Mit Flexbox oder Column-Layouts sind zwei recht neue Konzepte dazugekommen – und jetzt steht Grid in den Startlöchern. Was das genau ist und wofür man es verwenden kann, das sehen wir uns jetzt mal genauer an.\u003C/span>\u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Was ist Grid?\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Laut W3C definiert Grid “\u003C/span>\u003Cspan style=\"font-weight: 400;\">a two-dimensional grid-based layout system, optimized for user interface design”. Da sind wir auch gleich beim entscheidenden Unterschied zwischen Grid und Flexbox: Flexbox ist eigentlich darauf ausgelegt, Elemente innerhalb einer Zeile oder einer Spalte zu positionieren, nicht beides. Für Spalten \u003C/span>\u003Ci>\u003Cspan style=\"font-weight: 400;\">und \u003C/span>\u003C/i>\u003Cspan style=\"font-weight: 400;\">Reihen ist Grid der Spezialist. Grid ist also ein zweidimensionales Layoutsystem, das speziell für User-Interface Designs (also bspw. Webapps oder Single-Page-Applications) viele Vorteile bringt. Mit Grid können Layoutbereiche recht einfach definiert werden, denen dann Inhalte zugeordnet werden können. Damit trennt es das Design/Layout logisch vom Aufbau des HTML-Dokuments, anders als es bei Floats oder Flexbox der Fall ist – der Aufbau im HTML-Dokument soll aber bitte trotzdem semantisch sinnvoll aufgebaut sein, da man sonst die Accessibility gefährdet.\u003C/span>\u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Die Basics – Wie funktionierts?\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ich werde hier nur kurz die Grundlagen zeigen, unten gibt’s aber weiterführende Links, falls man tiefer eintauchen möchte 😉 Die Funktionsweise erinnert etwas an Flexbox – die Grundeinstellungen des Gridlayouts werden in einem Eltern-Element / Wrapper definiert, Feinjustierungen dann in den zu positionierenden Kind-Elementen.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Es gibt verschiedene Arten, wie man ein Grid aufsetzen kann. Sehen wir uns die Möglichkeiten anhand eines recht einfachen Layouts an: Ein Header, der die gesamte Breite einnimmt, darunter links der Content-Bereich, rechts daneben zwei Sidebars (untereinander) und ganz unten – wieder in voller Breite – der Footer. \u003C/span>\u003C/p>\n\u003Cp>\u003C/p>\u003Cdiv id=\"attachment_10936\" style=\"width: 504px\" class=\"wp-caption aligncenter\">\u003Cdiv alt=\"Das gewünschte Layout\" data-entity-type=\"media\" data-entity-uuid=\"dd7aab3d-7934-4d21-a035-f1c6da721ca7\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=QpG7lEgF 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=CRw822EM 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"956\" height=\"609\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=O_6ippp_ 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=lnWm-rdj 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"956\" height=\"609\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=y54cWe8g 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=G5E6o5Qe 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"475\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=iP-5sIWF 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=BmIJtUUn 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"306\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=QRWDrDv_ 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.webp?itok=ronPNddu 2x\" type=\"image/webp\" width=\"956\" height=\"609\">\n                  \u003Cimg loading=\"lazy\" width=\"956\" height=\"609\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2017/08/grid-goal-1.png.jpg?itok=ronPNddu\" alt=\"Das gewünschte Layout\" title=\"grid-goal\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp id=\"caption-attachment-10936\" class=\"wp-caption-text\">Das gewünschte Layout für unseren CSS Grid-Test\u003C/p>\u003C/div>\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Grundsätzlich werden definierte Grid-Elemente der Reihe nach befüllt, das heißt, das erste Kind-Element des Grid-Wrappers füllt das erste Grid-Element, das zweite Kind-Element das zweite Grid-Element, bis die erste Reihe vollständig befüllt ist. Dann die zweite Reihe u\u003C/span>sw.\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Da Grid ein zweidimensionales System ist, das mithilfe von Reihen und Spalten definiert wird, müssen wir zuerst eruieren, wie viele Reihen/Zeilen und wie viele Spalten es gibt.\u003C/span>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">In unserem Fall haben wir es mit 4 Zeilen zu tun:\u003C/span>\u003C/p>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">1. Zeile: Header \u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">2. Zeile: Content und Sidebar-1 \u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">3. Zeile: Content und Sidebar-2\u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">4. Zeile: Footer\u003C/span>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Da der Content-Bereich ⅔ der Breite einnehmen soll, benötigen wir 3 Spalten für unser Layout: \u003C/span>\u003C/p>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">1. und 2. Spalte: Header, Content und Footer\u003C/span>\u003C/li>\n\u003Cli style=\"font-weight: 400;\">\u003Cspan style=\"font-weight: 400;\">3. Spalte: Header, Sidebar-1, Sidebar-2 und Footer\u003C/span>\u003C/li>\n\u003C/ul>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Dass sich der Content über zwei Zeilen erstreckt und Header/Footer die gesamte Breite benötigen, stört uns nicht – das regeln wir schon noch.\u003C/span>\u003C/p>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Die visuelle Definition\u003C/span>\u003C/h3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Für den Einstieg recht praktisch ist die visuelle Definition: Man definiert das Grid mit den Namen der einzelnen Bereiche, der Aufbau erinnert an eine 2-dimensionale Matrix, oder eine recht einfache Darstellung einer Tabelle. Dies wird der Eigenschaft  \u003C/span>\u003Ci>\u003Cspan style=\"font-weight: 400;\">grid-template-areas \u003C/span>\u003C/i>\u003Cspan style=\"font-weight: 400;\">zugwiesen. Ebenfalls muss natürlich \u003C/span>\u003Ci>\u003Cspan style=\"font-weight: 400;\">display:grid \u003C/span>\u003C/i>\u003Cspan style=\"font-weight: 400;\">gesetzt sein.\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">display:grid;\ngrid-template-areas:\n”header   header   header\n content  content  sidebar-1\n content  content  sidebar-2\n footer   footer   footer”;\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Nun ist das Grid grundsätzlich definiert und die HTML-Container können diesen Bereichen zugewiesen werden:\u003C/span>\u003C/p>\n\u003Cp>zb:\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">#header{grid-area: header;}\n#content{grid-area: content;}\n...\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Und schon ist das Layout fertig.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Zu beachten ist hier, dass die natürliche Reihenfolge nicht eingehalten werden muss. Der Header könnte das letzte Wrapper-Kind sein und würde trotzdem richtig angezeigt werden. Das kann aber Folgen für die Accessibility haben.\u003C/span>\u003C/p>\n\u003Cp>\u003Cscript async src=\"//jsfiddle.net/snookas/ept8ao8c/embed/html,css,result/\">\u003C/script>\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Hier sind wir aber noch recht eingeschränkt. Wenn eine Spalte ⅔ der Breite haben soll, müssen wir ihr 2 Spalten zuordnen. Das ist etwas redundant. Deshalb sehen wir uns die deklarative Definition an, die uns mehr Möglichkeiten bietet. \u003C/span>\u003C/p>\n\u003Ch3>\u003Cspan style=\"font-weight: 400;\">Die deklarative Definition\u003C/span>\u003C/h3>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Die deklarative Definition kann als Erweiterung zur visuellen Definition verwendet werden, um exakt die Breiten und Höhen der Reihen und Spalten zu definieren. Sie kann aber auch ohne visuelle Definition verwendet werden. Man vergibt direkt bei der Definition die gewünschten Höhen und Breiten, wir benötigen deshalb nicht zwei Spalten, um den Content-Bereich auf ⅔ der Gesamtbreite auszudehnen. Bei dieser Methode brauchen wir also nur insgesamt 2 Spalten. Die Zeilen werden so definiert:\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">grid-template-rows:\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">    auto /* so hoch, wie der Inhalt es braucht*/\n    1fr  /* 1 Fraction: vorhandener Platz wird aufgeteilt*/\n    1fr  /* diese Zeile wird also auf den vorhandenen Platz */\n         /* gleich viel Platz einnehmen, wie die Zeile darüber */\n    auto;\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Die Spalten so:\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">grid-template-columns:\u003C/span>\u003C/p>\n\u003Cpre style=\"font-size: 0.8em;\">    2fr  /* 2 Teile für diese Spalte */\n    1fr; /* 1 Teile für diese Spalte */\n         /* ⇒ wir erhalten eine ⅔- zu ⅓- Teilung des vorhandenen Platzes*/\n\u003C/pre>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Das Ergebnis ist recht vergleichbar mit dem der vorherigen Methode:\u003C/span>\u003C/p>\n\u003Cp>\u003Cscript async src=\"//jsfiddle.net/snookas/8koatmof/4/embed/html,css,result/\">\u003C/script>\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Wie gesagt, die beiden Definitionen erweitern sich gegenseitig; Hier gibt es unser Beispiel mit Area-Namen und deklarativ beschriebenen Grid-Elementen:\u003C/span>\u003C/p>\n\u003Cp>\u003Cscript async src=\"//jsfiddle.net/snookas/sqLzyg9t/embed/html,css,result/\">\u003C/script>\u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Weiteres\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Das ist für ein paar Zeilen CSS schon recht imposant, es gibt natürlich noch viel mehr Möglichkeiten. Positionierung über Grid-Linien (inkl. Namen), Überlappungen von Elementen, Sortierung, Subgrids und vieles mehr…\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Eine besondere Stärke spielen Grid-Layouts bei Responsive-Layouts aus: Es ist wirklich einfach und kompakt, das gesamte Grid mithilfe von Media-Queries, je nach Bildschirmgröße, zu verändern.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ihr habt jetzt Blut geleckt? Hier gibt’s gute weiterführende Infos:\u003C/span>\u003C/p>\n\u003Cp>\u003Ca href=\"https://css-tricks.com/things-ive-learned-css-grid-layout/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan style=\"font-weight: 400;\">https://css-tricks.com/things-ive-learned-css-grid-layout/\u003C/span>\u003C/a>\u003Cbr>\n\u003Ca href=\"https://blog.kulturbanause.de/2013/12/css-grid-layout-module/#chapter10\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan style=\"font-weight: 400;\">https://blog.kulturbanause.de/2013/12/css-grid-layout-module/#chapter10\u003C/span>\u003C/a>\u003Cbr>\n\u003Ca href=\"https://css-tricks.com/snippets/css/complete-guide-grid/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan style=\"font-weight: 400;\">https://css-tricks.com/snippets/css/complete-guide-grid/\u003C/span>\u003C/a>\u003Cbr>\n\u003Ca href=\"https://gridbyexample.com/patterns/header-twocol-footer/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan style=\"font-weight: 400;\">https://gridbyexample.com/patterns/header-twocol-footer/\u003C/span>\u003C/a>\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">und natürlich hier: \u003C/span>\u003Ca href=\"https://www.w3.org/TR/css-grid-1/\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cspan style=\"font-weight: 400;\">https://www.w3.org/TR/css-grid-1/\u003C/span>\u003C/a>\u003Cbr>\n \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":172,"id":173,"excludeFromScreenreader":13,"mediaImage":174,"name":81,"path":181,"status":20},"MediaImage","1475",{"__typename":175,"url":176,"width":177,"height":178,"alt":81,"title":81,"size":179,"mime":180},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2017/08/css_grid_bild_1920x500_2017-1.png",1920,500,2826,"image/png","/media/1475/edit",{"__typename":172,"id":183,"excludeFromScreenreader":13,"mediaImage":184,"name":81,"path":189,"status":20},"1474",{"__typename":175,"url":185,"width":186,"height":187,"alt":81,"title":81,"size":188,"mime":180},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2017/08/css_grid_bild_922x519_2017-1.png",922,519,2458,"/media/1474/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Es gibt verschiedene Möglichkeiten Layouts mit CSS umzusetzen. Nach Tabellen, Floats, und Flexbox steht nun Grid in den Startlöchern.\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/css-grid/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"CSS Grid - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Es gibt verschiedene Möglichkeiten Layouts mit CSS umzusetzen. Nach Tabellen, Floats, und Flexbox steht nun Grid in den Startlöchern.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/css-grid/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2017-08-10T12:55:14+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2019-04-09T09:40:20+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2017/08/grid-goal-1.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"4 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/css-grid/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2017/08/grid-goal-1.png\",\"width\":956,\"height\":609},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/css-grid/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/css-grid/\",\"name\":\"CSS Grid - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/css-grid/#primaryimage\"},\"datePublished\":\"2017-08-10T12:55:14+00:00\",\"dateModified\":\"2019-04-09T09:40:20+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/0cb8cf424fe0fc1943e1a09a426032c4\"},\"description\":\"Es gibt verschiedene M\\u00f6glichkeiten Layouts mit CSS umzusetzen. Nach Tabellen, Floats, und Flexbox steht nun Grid in den Startl\\u00f6chern.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/css-grid/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/0cb8cf424fe0fc1943e1a09a426032c4\",\"name\":\"Lukas Kindermann\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/116fdcda3e1d9ad0d3b65dd2e1d2dd40?s=96&d=mm&r=g\",\"caption\":\"Lukas Kindermann\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":192,"id":193,"myRole":194,"name":195,"nickname":196},"User","8","Omnom-Fanboy","lukas","Lukas Kindermann",{"latestKnowhow":198},[199,215,228],{"__typename":79,"id":200,"title":201,"path":202,"wpTeaserText":203,"wpPromotedTeaserImage":13,"wpHeaderImage":204},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":172,"id":205,"excludeFromScreenreader":13,"mediaImage":206,"name":213,"path":214,"status":20},"3364",{"__typename":175,"url":207,"width":208,"height":209,"alt":210,"title":13,"size":211,"mime":212},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"image/jpeg","Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":216,"title":217,"path":218,"wpTeaserText":219,"wpPromotedTeaserImage":13,"wpHeaderImage":220},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":172,"id":221,"excludeFromScreenreader":13,"mediaImage":222,"name":226,"path":227,"status":20},"3355",{"__typename":175,"url":223,"width":208,"height":209,"alt":224,"title":13,"size":225,"mime":212},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":229,"title":230,"path":231,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":232},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":172,"id":233,"excludeFromScreenreader":21,"mediaImage":234,"name":238,"path":239,"status":20},"3303",{"__typename":175,"url":235,"width":208,"height":209,"alt":236,"title":13,"size":237,"mime":212},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":241,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":242,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":246,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":249,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":252,"Menu:footer":255,"ROOT_QUERY":265,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":281,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":284,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":287,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":290,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":293,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":296,"Menu:nuxt-main-menu":299,"TermCategories:7":313,"TermTags:295":324,"TermTags:297":325,"TermTags:558":326,"TermTags:597":327,"TermTags:745":328,"TermTags:1072":329,"TermTags:1256":330,"MediaImage:1475":331,"MediaImage:1474":333,"User:8":335,"NodeWpPost:854":336,"MediaImage:3364":371,"NodeWpPost:1619":373,"MediaImage:3355":376,"NodeWpPost:1616":378,"MediaImage:3303":381,"NodeWpPost:1606":383},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",243,"internal",20,"expanded",21,"attributes",245],{"__ref":244},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",247,"internal",20,"expanded",21,"attributes",248],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",250,"internal",20,"expanded",21,"attributes",251],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",253,"internal",21,"expanded",21,"attributes",254],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",256],[257,259,261,263],{"__ref":258},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":260},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":262},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":264},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",266,"menu({\"name\":\"FOOTER\"})",267,"menu({\"name\":\"NUXT_MAIN_MENU\"})",269,"route({\"path\":\"/blog/css-grid\"})",271,"latestKnowhow({\"excludeId\":\"854\",\"limit\":3})",274],"Query",{"__ref":268},"Menu:footer",{"__ref":270},"Menu:nuxt-main-menu",["null","__typename",77,"entity",272],{"__ref":273},"NodeWpPost:854",[275,277,279],{"__ref":276},"NodeWpPost:1619",{"__ref":278},"NodeWpPost:1616",{"__ref":280},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",282,"internal",20,"expanded",21,"attributes",283],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",285,"internal",20,"expanded",21,"attributes",286],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",288,"internal",20,"expanded",21,"attributes",289],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",291,"internal",20,"expanded",21,"attributes",292],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",294,"internal",20,"expanded",21,"attributes",295],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",297,"internal",20,"expanded",21,"attributes",298],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",300],[301,303,305,307,309,311],{"__ref":302},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":304},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":306},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":308},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":310},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":312},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",114,"id",115,"name",116,"path",117,"status",20,"weight",118,"description",314,"langcode",315,"changed",316,"metatag",317],["null","__typename",120,"processed",121,"format",122],{"__ref":244},["null","__typename",83,"timestamp",125,"timezone",85,"offset",86,"time",126],[318,320,322],["null","__typename",95,"tag",96,"attributes",319],["null","__typename",98,"name",99,"content",130],["null","__typename",95,"tag",96,"attributes",321],["null","__typename",98,"name",133,"content",134],["null","__typename",102,"tag",103,"attributes",323],["null","__typename",105,"href",137,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",140,"id",141,"name",142,"path",143,"weight",118],["null","__typename",140,"id",145,"name",146,"path",147,"weight",118],["null","__typename",140,"id",149,"name",150,"path",151,"weight",118],["null","__typename",140,"id",153,"name",154,"path",155,"weight",118],["null","__typename",140,"id",157,"name",158,"path",159,"weight",118],["null","__typename",140,"id",161,"name",162,"path",163,"weight",118],["null","__typename",140,"id",165,"name",166,"path",167,"weight",118],["null","__typename",172,"id",173,"excludeFromScreenreader",13,"mediaImage",332,"name",81,"path",181,"status",20],["null","__typename",175,"url",176,"width",177,"height",178,"alt",81,"title",81,"size",179,"mime",180],["null","__typename",172,"id",183,"excludeFromScreenreader",13,"mediaImage",334,"name",81,"path",189,"status",20],["null","__typename",175,"url",185,"width",186,"height",187,"alt",81,"title",81,"size",188,"mime",180],["null","__typename",192,"id",193,"myRole",194,"name",195,"nickname",196],["null","__typename",79,"id",80,"title",81,"changed",337,"created",338,"langcode",339,"path",92,"promote",21,"status",20,"sticky",21,"metatag",340,"category",347,"contentElements",13,"evergreen",13,"tags",349,"wpBody",364,"wpHeaderImage",13,"wpHeaderImageOld",365,"wpHeaderImageOldSmall",367,"wpOgImage",13,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",190,"author",369],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":244},[341,343,345],["null","__typename",95,"tag",96,"attributes",342],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",344],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",346],["null","__typename",111,"property",112,"content",81],{"__ref":348},"TermCategories:7",[350,352,354,356,358,360,362],{"__ref":351},"TermTags:295",{"__ref":353},"TermTags:297",{"__ref":355},"TermTags:558",{"__ref":357},"TermTags:597",{"__ref":359},"TermTags:745",{"__ref":361},"TermTags:1072",{"__ref":363},"TermTags:1256",["null","__typename",169,"processed",170,"format",122,"summary",13],{"__ref":366},"MediaImage:1475",{"__ref":368},"MediaImage:1474",{"__ref":370},"User:8",["null","__typename",172,"id",205,"excludeFromScreenreader",13,"mediaImage",372,"name",213,"path",214,"status",20],["null","__typename",175,"url",207,"width",208,"height",209,"alt",210,"title",13,"size",211,"mime",212],["null","__typename",79,"id",200,"title",201,"path",202,"wpTeaserText",203,"wpPromotedTeaserImage",13,"wpHeaderImage",374],{"__ref":375},"MediaImage:3364",["null","__typename",172,"id",221,"excludeFromScreenreader",13,"mediaImage",377,"name",226,"path",227,"status",20],["null","__typename",175,"url",223,"width",208,"height",209,"alt",224,"title",13,"size",225,"mime",212],["null","__typename",79,"id",216,"title",217,"path",218,"wpTeaserText",219,"wpPromotedTeaserImage",13,"wpHeaderImage",379],{"__ref":380},"MediaImage:3355",["null","__typename",172,"id",233,"excludeFromScreenreader",21,"mediaImage",382,"name",238,"path",239,"status",20],["null","__typename",175,"url",235,"width",208,"height",209,"alt",236,"title",13,"size",237,"mime",212],["null","__typename",79,"id",229,"title",230,"path",231,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",384],{"__ref":385},"MediaImage:3303"]