Responsive design using CSS grid

ashwinvis · ashwinvis · commit b7a31af05545 · 2018-10-12T17:06:53.000+02:00
diff --git a/github-markdown.css b/github-markdown.css
@@ -10,7 +10,6 @@ html {
 }
 
 body {
-    min-width: 1020px;
     font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
     /* color: #333; */
     background-color: #fff;
@@ -31,22 +30,27 @@ td,th {
 }
 
 .container {
-    width: 980px;
+    display: grid;
+    grid-template-columns: 2em 1fr 2em;
+    grid-template-rows: 0fr  1fr 0fr;
+    max-width: 1020px;
     margin-right: auto;
     margin-left: auto
 }
 
 .container:before {
-    display: table;
     content: ""
 }
 
 .container:after {
-    display: table;
     clear: both;
     content: ""
 }
 
+.item {
+    display: flex;
+}
+
 .boxed-group {
     position: relative;
     border-radius: 3px;
@@ -68,12 +72,10 @@ td,th {
 }
 
 .repository-with-sidebar:before {
-    display: table;
     content: ""
 }
 
 .repository-with-sidebar:after {
-    display: table;
     clear: both;
     content: ""
 }
@@ -244,12 +246,12 @@ td,th {
 }
 
 .markdown-body hr:before {
-  display: table;
+  display: flex;
   content: "";
 }
 
 .markdown-body hr:after {
-  display: table;
+  display: flex;
   clear: both;
   content: "";
 }
diff --git a/index.html b/index.html
@@ -62,16 +62,23 @@
   </script>
 </head>
 <body>
-  <div class="wrapper">
-    <div class="container">
+  <div class="container">
+    <div class="item row1"></div>
+    <div class="item row1"></div>
+    <div class="item row2"></div>
+    <div class="item row2"> // The main row
       <div class="repository-with-sidebar repo-container new-discussion-timeline with-full-navigation">
-        <div id="js-repo-pjax-container" class="repository-content context-loader-container">
-          <div id="readme" class="boxed-group flush clearfix announce instapaper_body md">
-            <article class="markdown-body"></article>
-          </div>
-        </div>
-      </div>
+         <div id="js-repo-pjax-container" class="repository-content context-loader-container">
+           <div id="readme" class="boxed-group flush clearfix announce instapaper_body md">
+             <article class="markdown-body"></article>
+           </div>
+         </div>
+       </div>
     </div>
+    <div class="item row2"></div>
+    <div class="item row3"></div>
+    <div class="item row3"></div>
+    <div class="item row3"></div>
   </div>
   <div id="con-error" style="display:none">Live preview is unavailable</div>
 </body>

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,6 @@ html {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`body {`
`13`		`- min-width: 1020px;`
`14`	`13`	`font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";`
`15`	`14`	`/* color: #333; */`
`16`	`15`	`background-color: #fff;`
`@@ -31,22 +30,27 @@ td,th {`
`31`	`30`	`}`
`32`	`31`
`33`	`32`	`.container {`
`34`		`- width: 980px;`
	`33`	`+ display: grid;`
	`34`	`+ grid-template-columns: 2em 1fr 2em;`
	`35`	`+ grid-template-rows: 0fr 1fr 0fr;`
	`36`	`+ max-width: 1020px;`
`35`	`37`	`margin-right: auto;`
`36`	`38`	`margin-left: auto`
`37`	`39`	`}`
`38`	`40`
`39`	`41`	`.container:before {`
`40`		`- display: table;`
`41`	`42`	`content: ""`
`42`	`43`	`}`
`43`	`44`
`44`	`45`	`.container:after {`
`45`		`- display: table;`
`46`	`46`	`clear: both;`
`47`	`47`	`content: ""`
`48`	`48`	`}`
`49`	`49`
	`50`	`+.item {`
	`51`	`+ display: flex;`
	`52`	`+}`
	`53`	`+`
`50`	`54`	`.boxed-group {`
`51`	`55`	`position: relative;`
`52`	`56`	`border-radius: 3px;`
`@@ -68,12 +72,10 @@ td,th {`
`68`	`72`	`}`
`69`	`73`
`70`	`74`	`.repository-with-sidebar:before {`
`71`		`- display: table;`
`72`	`75`	`content: ""`
`73`	`76`	`}`
`74`	`77`
`75`	`78`	`.repository-with-sidebar:after {`
`76`		`- display: table;`
`77`	`79`	`clear: both;`
`78`	`80`	`content: ""`
`79`	`81`	`}`
`@@ -244,12 +246,12 @@ td,th {`
`244`	`246`	`}`
`245`	`247`
`246`	`248`	`.markdown-body hr:before {`
`247`		`- display: table;`
	`249`	`+ display: flex;`
`248`	`250`	`content: "";`
`249`	`251`	`}`
`250`	`252`
`251`	`253`	`.markdown-body hr:after {`
`252`		`- display: table;`
	`254`	`+ display: flex;`
`253`	`255`	`clear: both;`
`254`	`256`	`content: "";`
`255`	`257`	`}`