{"id":2421,"date":"2017-09-27T09:47:41","date_gmt":"2017-09-27T07:47:41","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=2421"},"modified":"2017-11-03T14:21:19","modified_gmt":"2017-11-03T13:21:19","slug":"css-grid","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/css-grid\/","title":{"rendered":"CSS Grid – f\u00fcr komplexe Webdesigns"},"content":{"rendered":"

Lange Zeit haben wir Frontend-Entwickler uns mit „floats“ und „clearfixes“ herumgeschlagen. \u00dcberfl\u00fcssige leere HTML-Tags waren lange unumg\u00e4nglich. Hat man mal nicht aufgepasst, verschoben sich die Inhalte direkt unlesbar \u00fcbereinander. Und alles nur, um 2 oder mehr Spalten nebeneinander anzuordnen. Von einer identischen H\u00f6he der Spalten war nur zu tr\u00e4umen. Dann kam das CSS-Modell „Flexbox“<\/a> und wir Entwickler konnten aufatmen. Nun k\u00fcndig sich ein neues Layout-Modell mit CSS an – CSS Grid. So langsam unterst\u00fctzen alle modernen Browser-Versionen diese Technik. Grund genug, sich CSS Grid einmal anzusehen.<\/p>\n

Was kann CSS Grid? – Ein Beispiel<\/h2>\n

Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Ein Webdesign setzt sich meist aus verschiedenen Bereichen zusammen (z.B. Header, Footer, Inhalt rechts, Inhalt links). Diese Bereiche k\u00f6nnen mittels CSS Grid leicht zueinander ausgerichtet werden.<\/p>\n

Hier ein Beispiel, bestehend aus Header, Footer und einem in linker und rechter Spalte aufgeteiltem Inhaltsbereich:<\/p>\n

\"CSS<\/p>\n

Mit CSS Grid kann dieses Layout eines Webdesigns folgenderma\u00dfen umgesetzt werden:<\/p>\n

<div class=\"wrapper\">\r\n    <div class=\"header\">Header<\/div>\r\n    <div class=\"content-left-top\">Content Left Top<\/div>\r\n    <div class=\"content-left-bottom-left\">Content Left Bottom Left<\/div>\r\n    <div class=\"content-left-bottom-right\">Content Left Bottom Right<\/div>\r\n    <div class=\"content-right\">Content Right<\/div>\r\n    <div class=\"footer-left\">Footer Left<\/div>\r\n    <div class=\"footer-right\">Footer Right<\/div>\r\n<\/div><\/pre>\n
.wrapper {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  grid-template-rows: 120px auto auto 80px;\r\n  grid-column-gap: 20px;\r\n  grid-row-gap: 20px;\r\n}\r\n\r\n.header {\r\n  background: green;\r\n  grid-column-start: 1;\r\n  grid-column-end: 4;\r\n}\r\n\r\n.content-left-top {\r\n  background: orange;\r\n  grid-column-start: 1;\r\n  grid-column-end: 3;\r\n}\r\n\r\n.content-left-bottom-left {\r\n  background: lightgreen;\r\n  grid-column-start: 1;\r\n  grid-column-end: 2;\r\n}\r\n\r\n.content-left-bottom-right {\r\n  background: yellow;\r\n  grid-column-start: 2;\r\n  grid-column-end: 3;\r\n}\r\n\r\n.content-right {\r\n  background: purple;\r\n  grid-column-start: 3;\r\n  grid-column-end: 4;\r\n  grid-row-start: 2;\r\n  grid-row-end: 4;\r\n}\r\n\r\n.footer-left {\r\n  background: red;\r\n  grid-column-start: 1;\r\n  grid-column-end: 2;\r\n}\r\n\r\n.footer-right {\r\n  background: lightblue;\r\n  grid-column-start: 2;\r\n  grid-column-end: 4;\r\n}<\/pre>\n
Folgendes Raster wird durch diesen CSS-Code definiert:<\/p>\n
Es gibt 3 Spalten die gleichberechtigt auf die verf\u00fcgbare Breite gezogen werden (1fr) – damit kommt jede Spalte auf eine Breite von 33,33%. Zudem gibt es 4 Zeilen, wobei die erste Zeile (wird f\u00fcr den Header verwendet) eine H\u00f6he von 120px\u00a0 und die letzte Zeile (f\u00fcr den Footer) eine H\u00f6he von 80px hat. Die restlichen Zeilen spannen sich durch „auto“ auf die H\u00f6he auf, die ihr Inhalt ben\u00f6tigt.<\/p>\n
Wichtig bei der Arbeit mit CSS Grid sind die Grid-Linien. Alle Trennlinien haben standardm\u00e4\u00dfig eine Nummer. Mittels dieser Nummern werden die einzelnen Boxen in dem Grid ausgerichtet.<\/p>\n
 <\/p>\n
\"CSS<\/p>\n
CSS Grid Eltern-Element<\/h2>\n
Wie auch bei Flexbox wird bei CSS Grid in Eltern- und Kind-Elemente unterschieden. Alle Boxen, die mit CSS Grid ausgerichtet werden sollen, ben\u00f6tigen ein gemeinsames umschlie\u00dfendes Element. In dem Beispiel ist dies das div mit der CSS-Klasse .wrapper. Dieses Eltern-Element bekommt die CSS-Eigenschaft display: grid;<\/strong>, um die Kind-Elemente mit CSS Grid ausrichten zu k\u00f6nnen.<\/p>\n
Definition der Spalten und Zeilen<\/h3>\n
Nun werden mittels grid-template-columns<\/strong> die Spalten sowie die einzelnen Spalten-Breiten definiert, welche das Grid enthalten soll. Bzw. werden mit grid-template-rows<\/strong>\u00a0die Zeilen und Zeilen-H\u00f6hen definiert.<\/p>\n
Die Breiten bzw. H\u00f6hen k\u00f6nnen mittels eines\u00a0festen <\/strong>Werts\u00a0<\/strong>(z.B. 250px, 20em), eines prozentualen <\/strong>Werts (z.B. 25%) oder als „fraction<\/strong>“ (1fr) definiert werden. Eine „fraction“ ist ein Anteil des verbleibenden Platzes. In dem obenstehenden Beispiel sind 3 Spalten definiert, die jeweils 1fr breit sind – das entspricht jeweils einer Breite von 33,33% der Gesamtbreite des Eltern-Elements. Ebenso gibt es ein paar Keywords, die hier angewendet werden k\u00f6nnen. Mittels „auto<\/strong>“ oder „fit-content<\/strong>“ wird die H\u00f6he oder Breite nach der nat\u00fcrlichen Gr\u00f6\u00dfe des Inhalts ausgerichtet. Mit „repeat()<\/strong>“ k\u00f6nnen mehrere Spalten oder Zeilen mit identischen Ma\u00dfen quasi automatisiert angelegt werden. Es gibt noch ein paar mehr Keywords, die f\u00fcr das Grundverst\u00e4ndnis von CSS Grid allerdings nicht wichtig sind. Eine umfassende \u00dcbersicht findet man hier<\/a>.<\/p>\n
Abstand zwischen den Spalten und Zeilen<\/h3>\n
Mit grid-column-gap<\/strong> und\u00a0grid-row-gap<\/strong> kann per L\u00e4ngenangabe der Abstand zwischen den Spalten bzw. Zeilen definiert werden.<\/p>\n
Vereinfachung durch Grid-Bereiche<\/h3>\n
Vereinfacht wird die Positionierung der Kind-Elemente durch Grid-Bereiche. Diese k\u00f6nnen betitelt und definiert werden und ersetzen dann die Positionierung der Kind-Elemente anhand der Grid-Linien. Dies macht die Konfiguration des Grids lesbarer und weniger umfangreich. Ein Beispiel:<\/p>\n
.wrapper {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr 1fr;\r\n  grid-template-rows: 120px auto auto 80px;\r\n  grid-column-gap: 20px;\r\n  grid-row-gap: 20px;\r\n  grid-template-areas:  \r\n    \"header header header\" \r\n    \"content-top content-top sidebar\" \r\n    \"content-bottom-left content-bottom-right sidebar\"\r\n    \"footer-left footer-right footer-right\" \r\n  ; \r\n}\r\n\r\n.header {\r\n  background: green;\r\n  grid-area: header;\r\n}\r\n.content-left-top {\r\n  background: orange;\r\n  grid-area: content-top;\r\n}\r\n.content-left-bottom-left {\r\n  background: lightgreen;\r\n  grid-area: content-bottom-left;\r\n}\r\n.content-left-bottom-right {\r\n  background: yellow;\r\n  grid-area: content-bottom-right;\r\n}\r\n.content-right {\r\n  background: purple;\r\n  grid-area: sidebar; \r\n}\r\n.footer-left {\r\n  background: red;\r\n  grid-area: footer-left; \r\n}\r\n.footer-right {\r\n  background: lightblue;\r\n  grid-area: footer-right; \r\n}<\/pre>\n
Ausrichtung der Kind-Elemente und des kompletten Grid-Containers<\/h3>\n
Wie auch bei Flexbox kann direkt im Eltern-Element definiert werden, wie sich die Kind-Elemente in der horizontalen und der vertikalen Achse ausrichten sollen. Mit justify-items<\/strong>\u00a0wird dies f\u00fcr die Horizontale festgelegt, mit align-items<\/strong> f\u00fcr die Vertikale. Die Angaben align-items\u00a0und justify-items k\u00f6nnen durch die Keywords start, end, center <\/strong>und stretch<\/strong> ausgerichtet werden.<\/p>\n
Ebenso kann mit justify-content<\/strong>\u00a0und align-content<\/strong> definiert werden, wie sich der komplette Grid-Container in seinem Umfeld ausrichten soll. Hierf\u00fcr kann mit den Eigenschaften start, end, center, stretch, space-around, space-between <\/strong>und space-evenly<\/strong>\u00a0gearbeitet werden.<\/p>\n
CSS Grid Kind-Element<\/h2>\n
Jedes Kind-Element des Grids erh\u00e4lt eine genaue Position und Gr\u00f6\u00dfe. Zudem kann die Ausrichtung des Inhalts der Kind-Elemente bestimmt werden.<\/p>\n
Aufspannen und Position<\/h3>\n
Die einzelnen Kind-Elemente des Grids werden ausgerichtet, indem sie einen Start- und Endpunkt zugewiesen bekommen, sowohl in der Horizontalen als auch in der Vertikalen. Dazu werden grid-column-start<\/strong>, grid-column-end<\/strong>, grid-row-start<\/strong> und grid-row-end<\/strong> genutzt. Diese Angaben werden durch eine Nummer<\/strong> definiert, welche die Nummer der Grid-Linie darstellt. Die Nummern der Grid-Linien sind in der obigen grafischen Grid-Struktur beispielhaft zu erkennen. Ebenso ist der Wert auto<\/strong> oder die Angabe eines Linien-Namen<\/strong> m\u00f6glich.<\/p>\n
Die Angaben grid-column-start<\/strong> und grid-row-start<\/strong> definieren den Startpunkt des Kind-Elements, also die Position der linken bzw. oberen Kante. Sitzt diese auf der Grid-Linie 1 ist die Position entsprechend ganz links, bzw. ganz oben. Mit der Grid-Line 2 rutscht das Kind-Element um eine Spalte nach rechts bzw. eine Zeile nach unten.\u00a0Ebenso verhalten sich die Angaben\u00a0grid-column-end<\/strong> und grid-row-end<\/strong>, sie definieren entsprechend die rechte bzw. die untere Kante des Kind-Elements.<\/p>\n
Das Zusammenspiel aller 4 Angaben definiert den kompletten Inhaltsbereich des Kind-Elements, da es sich somit bis an seine Grenzen aufspannt.<\/p>\n
F\u00fcr die Positionierung des Kind-Elements gibt es zudem eine Kurzschreibweise:<\/p>\n
.content-right {\r\n  grid-column-start: 3;\r\n  grid-column-end: 4;\r\n  grid-row-start: 2;\r\n  grid-row-end: 4;\r\n\r\n  \/\/ Kurzschreibweise\r\n  grid-column: 3 \/ 4;\r\n  grid-row: 2 \/ 4;\r\n}<\/pre>\n
Benennung der Grid-Linien<\/h3>\n
Die Grid-Linien k\u00f6nnen betitelt werden und die Titel dann anstelle der Nummern f\u00fcr die Positionierung der Kind-Elemente eingesetzt werden. Das macht die Definition der Kind-Elemente leichter nachzuvollziehen.<\/p>\n
.wrapper {\r\n  display: grid;\r\n  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr [col4];\r\n  grid-template-rows: [header] 120px [row1] auto [row2] auto [footer] 80px [end];\r\n  grid-column-gap: 20px;\r\n  grid-row-gap: 20px;\r\n}\r\n\r\n.header {\r\n  background: green;\r\n  grid-column-start: col1;\r\n  grid-column-end: col4;\r\n}\r\n.content-left-top {\r\n  background: orange;\r\n  grid-column-start: col1;\r\n  grid-column-end: col3;\r\n}\r\n.content-left-bottom-left {\r\n  background: lightgreen;\r\n  grid-column-start: col1;\r\n  grid-column-end: col2;\r\n}\r\n.content-left-bottom-right {\r\n  background: yellow;\r\n  grid-column-start: col2;\r\n  grid-column-end: col3;\r\n}\r\n.content-right {\r\n  background: purple;\r\n  grid-column-start: col3;\r\n  grid-column-end: col4;\r\n  grid-row-start: row1;\r\n  grid-row-end: footer;\r\n}\r\n.footer-left {\r\n  background: red;\r\n  grid-column-start: col1;\r\n  grid-column-end: col2;\r\n}\r\n.footer-right {\r\n  background: lightblue;\r\n  grid-column-start: col2;\r\n  grid-column-end: col4;\r\n}<\/pre>\n
Zuweisung von Grid-Bereichen<\/h3>\n
Noch leichter zu lesen ist alternativ zu der Angabe der Linien-Nummern bzw. Linien-Namen die Verwendung von Grid-Bereichen. Diese k\u00f6nnen im Eltern-Element benannt und dann im Kind-Element mit grid-area<\/strong> zugewiesen werden (siehe obiges Code-Beispiel im Abschnitt „Vereinfachung durch Grid-Bereiche“).<\/p>\n
Ausrichtung des Inhalts<\/h3>\n
Wie auch das Eltern-Element kann das Kind-Element die Ausrichtung der enthaltenen Inhalte definieren. Die Angabe justify-self<\/strong> definiert die Ausrichtung der Inhalte in horizontaler Achse, align-self<\/strong> in vertikaler Achse.<\/p>\n
Beide Angaben k\u00f6nnen\u00a0durch die Keywords start, end, center<\/strong> und stretch<\/strong> ausgerichtet werden.<\/p>\n
CSS Grid vs. Flexbox<\/h2>\n
Der grundlegende Unterschied zwischen CSS Grid und Flexbox ist die generelle Arbeitsweise. W\u00e4hrend Flexbox die Elemente in einer Dimension ausrichtet (entweder horizontal ODER vertikal) ist mit CSS Grid die zweidimensionale Ausrichtung m\u00f6glich.<\/p>\n
Das obige Beispiel-Layout k\u00f6nnte mittels Flexbox ebenfalls umgesetzt werden, dazu w\u00e4re allerdings eine tiefere HTML-Schachtelung und Aufteilung in mehrere Zeilen und Spalten notwendig. Mittels CSS Grid ist dies mit einem sauberen HTML-Code umsetzbar, ohne zus\u00e4tzliche Container und tiefere Ebenen.<\/p>\n
Somit eignet sich CSS Grid perfekt f\u00fcr die Umsetzung der generellen Struktur eines Webdesigns, z.B. die Aufteilung von Header, Footer, Contentbereich. F\u00fcr die Ausrichtung von einzelnen Inhaltselementen (z.B. Produkt-\u00dcbersicht, Spalten innerhalb des Inhaltsbereich) bietet Flexbox eine gute Grundlage f\u00fcr die Umsetzung, da hierbei nur eine eindimensionale Aurichtung n\u00f6tig ist.<\/p>\n
 <\/p>\n
Haben Sie CSS Grid bereits ausprobiert? Schreiben Sie uns Ihre Erfahrungen gerne als Kommentar oder nehmen Sie Kontakt<\/a> zu uns auf.<\/p>\n","protected":false},"excerpt":{"rendered":"
Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Wir geben eine Einf\u00fchrung und \u00dcbersicht \u00fcber die M\u00f6glichkeiten von CSS Grid anhand eines Beispiels<\/p>\n","protected":false},"author":8,"featured_media":2478,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[127,67,69,26,66],"class_list":["post-2421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css-grid","tag-css3","tag-flexbox","tag-responsive","tag-webdesign"],"acf":[],"yoast_head":"\nCSS Grid - Helfer f\u00fcr komplexe Webdesigns - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Wir geben eine Einf\u00fchrung und \u00dcbersicht \u00fcber die M\u00f6glichkeiten von CSS Grid anhand eines Beispiels\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/css-grid\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Grid - Helfer f\u00fcr komplexe Webdesigns - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Wir geben eine Einf\u00fchrung und \u00dcbersicht \u00fcber die M\u00f6glichkeiten von CSS Grid anhand eines Beispiels\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/css-grid\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-27T07:47:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-03T13:21:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/09\/css-grid_teaser-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Angela\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Angela\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"7\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/\"},\"author\":{\"name\":\"Angela\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\"},\"headline\":\"CSS Grid – f\u00fcr komplexe Webdesigns\",\"datePublished\":\"2017-09-27T07:47:41+00:00\",\"dateModified\":\"2017-11-03T13:21:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/\"},\"wordCount\":1130,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/css-grid_teaser-01.jpg\",\"keywords\":[\"CSS Grid\",\"CSS3\",\"Flexbox\",\"Responsive\",\"Webdesign\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/\",\"name\":\"CSS Grid - Helfer f\u00fcr komplexe Webdesigns - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/css-grid_teaser-01.jpg\",\"datePublished\":\"2017-09-27T07:47:41+00:00\",\"dateModified\":\"2017-11-03T13:21:19+00:00\",\"description\":\"Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Wir geben eine Einf\u00fchrung und \u00dcbersicht \u00fcber die M\u00f6glichkeiten von CSS Grid anhand eines Beispiels\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/css-grid_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/css-grid_teaser-01.jpg\",\"width\":1170,\"height\":577,\"caption\":\"CSS Grid, Regal mit B\u00fcchern\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/css-grid\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Grid – f\u00fcr komplexe Webdesigns\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/ba487d63eccacea4839c77536f9dd569\",\"name\":\"Angela\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g\",\"caption\":\"Angela\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/angela\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Grid - Helfer f\u00fcr komplexe Webdesigns - clickstorm Blog","description":"Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Wir geben eine Einf\u00fchrung und \u00dcbersicht \u00fcber die M\u00f6glichkeiten von CSS Grid anhand eines Beispiels","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/css-grid\/","og_locale":"de_DE","og_type":"article","og_title":"CSS Grid - Helfer f\u00fcr komplexe Webdesigns - clickstorm Blog","og_description":"Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Wir geben eine Einf\u00fchrung und \u00dcbersicht \u00fcber die M\u00f6glichkeiten von CSS Grid anhand eines Beispiels","og_url":"https:\/\/www.clickstorm.de\/blog\/css-grid\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2017-09-27T07:47:41+00:00","article_modified_time":"2017-11-03T13:21:19+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/09\/css-grid_teaser-01.jpg","type":"image\/jpeg"}],"author":"Angela","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Angela","Gesch\u00e4tzte Lesezeit":"7\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/"},"author":{"name":"Angela","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569"},"headline":"CSS Grid – f\u00fcr komplexe Webdesigns","datePublished":"2017-09-27T07:47:41+00:00","dateModified":"2017-11-03T13:21:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/"},"wordCount":1130,"commentCount":0,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/09\/css-grid_teaser-01.jpg","keywords":["CSS Grid","CSS3","Flexbox","Responsive","Webdesign"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/css-grid\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/","url":"https:\/\/www.clickstorm.de\/blog\/css-grid\/","name":"CSS Grid - Helfer f\u00fcr komplexe Webdesigns - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/09\/css-grid_teaser-01.jpg","datePublished":"2017-09-27T07:47:41+00:00","dateModified":"2017-11-03T13:21:19+00:00","description":"Mit CSS Grid k\u00f6nnen komplexe Webdesigns umgesetzt werden. Wir geben eine Einf\u00fchrung und \u00dcbersicht \u00fcber die M\u00f6glichkeiten von CSS Grid anhand eines Beispiels","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/css-grid\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/09\/css-grid_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/09\/css-grid_teaser-01.jpg","width":1170,"height":577,"caption":"CSS Grid, Regal mit B\u00fcchern"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/css-grid\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Grid – f\u00fcr komplexe Webdesigns"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/ba487d63eccacea4839c77536f9dd569","name":"Angela","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7a410dd158504ccaf4003dcfc3e8458caf513e73b06ddbfee2b0a7cdc0fa6456?s=96&d=mm&r=g","caption":"Angela"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/angela\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=2421"}],"version-history":[{"count":48,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2421\/revisions"}],"predecessor-version":[{"id":2479,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/2421\/revisions\/2479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/2478"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=2421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=2421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=2421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}