{"id":1027,"date":"2018-02-23T17:16:18","date_gmt":"2018-02-23T16:16:18","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=1027"},"modified":"2018-02-26T10:16:06","modified_gmt":"2018-02-26T09:16:06","slug":"css-grid-classes","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/css-grid-classes\/","title":{"rendered":"CSS Grid Classes"},"content":{"rendered":"<pre class=\"lang:css decode:true\">.grid {\r\n  margin: 0 auto;\r\n  width:100%;\r\n  height:90vh;\r\n  display: grid;\r\n  grid-gap: 1em 2ch;\r\n  grid-template-columns: repeat(6, 1fr);\r\n  grid-template-rows: repeat(4, 1fr);\r\n}\r\n\r\n.grid &gt; * {\r\n  background-color: lightgray;\r\n  text-align:center;\r\n}\r\n.col.w1 { grid-column-end: span 1; }\r\n.col.w2 { grid-column-end: span 2; }\r\n.col.w3 { grid-column-end: span 3; }\r\n.col.w4 { grid-column-end: span 4; }\r\n.col.w5 { grid-column-end: span 5; }\r\n.col.w6 { grid-column-end: span 6; }\r\n\r\n.col.h1 { grid-row-end: span 1; }\r\n.col.h2 { grid-row-end: span 2; }\r\n.col.h3 { grid-row-end: span 3; }\r\n.col.h4 { grid-row-end: span 4; }\r\n\r\n.col.l1 { grid-column-start: 1; }\r\n.col.l2 { grid-column-start: 2; }\r\n.col.l3 { grid-column-start: 3; }\r\n.col.l4 { grid-column-start: 4; }\r\n.col.l5 { grid-column-start: 5; }\r\n.col.l6 { grid-column-start: 6; }\r\n\r\n.col.t1 { grid-row-start: 1; }\r\n.col.t2 { grid-row-start: 2; }\r\n.col.t3 { grid-row-start: 3; }\r\n.col.t4 { grid-row-start: 4; }\r\n\r\n<\/pre>\n<pre class=\"lang:default decode:true \">&lt;div class=\"grid\"&gt;\r\n  &lt;div class=\"col w2 h3\"&gt;\r\n     A\r\n  &lt;\/div&gt;\r\n    &lt;div class=\"col w3 h2\"&gt;\r\n     B\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col t4 w6\"&gt;\r\n     C\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col l3 t3 w4\"&gt;\r\n     D\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"col l6 h2\"&gt;\r\n     E\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>With CSS variables<\/p>\n<pre class=\"lang:css decode:true \">:root {\r\n  --x: 1;\r\n  --y: 1;\r\n  --w: 1;\r\n  --h: 1;\r\n}\r\n\r\n.grid {\r\n  margin: 0 auto;\r\n  width:100%;\r\n  height:90vh;\r\n  display: grid;\r\n  grid-gap: 1em 2ch;\r\n  grid-template-columns: repeat(6, 1fr);\r\n  grid-template-rows: repeat(4, 1fr);\r\n}\r\n\r\n.grid &gt; * {\r\n  grid-column-start: var(--x);\r\n  grid-row-start: var(--y);  \r\n  grid-column-end: span var(--w);\r\n  grid-row-end: span var(--h);\r\n}\r\n\r\n.grid &gt; * {\r\n  background-color: lightgray;\r\n  text-align:center;\r\n}\r\n\r\n.header-a {\r\n  --x:2;\r\n  --y:3;\r\n  --w:5;\r\n  --h:2;\r\n}\r\n\r\n@media (min-width:1200px) {\r\n .header-a {\r\n    --w:2;\r\n  } \r\n}<\/pre>\n<pre class=\"lang:xhtml decode:true\">&lt;div class=\"grid\"&gt;\r\n  &lt;div class=\"header-a\"&gt; A &lt;\/div&gt; \r\n  &lt;div style=\"--w:6;--h:2\"&gt; B &lt;\/div&gt; \r\n  &lt;div style=\"--y:3;\"&gt; C &lt;\/div&gt; \r\n  &lt;div style=\"--y:4;\"&gt; D &lt;\/div&gt; \r\n&lt;\/div&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>.grid { margin: 0 auto; width:100%; height:90vh; display: grid; grid-gap: 1em 2ch; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); } .grid &gt; * { background-color: lightgray; text-align:center; } .col.w1 { grid-column-end: span 1; } .col.w2 { grid-column-end: span 2; } .col.w3 { grid-column-end: span 3; } .col.w4 { grid-column-end: span 4; } .col.w5 { grid-column-end: span [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-1027","post","type-post","status-publish","format-standard","hentry","category-websites"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1027","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=1027"}],"version-history":[{"count":6,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1027\/revisions"}],"predecessor-version":[{"id":1035,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/1027\/revisions\/1035"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=1027"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=1027"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=1027"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}