From c6c0b98a5e2c53d05b203f7090c85f5668e25e69 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 27 Sep 2018 17:36:44 +0200
Subject: [PATCH] four columns

---
 rowers/templates/redesign_analysis.html |  9 ++++-----
 static/css/styles2.css                  | 25 ++++++++++++++++++++++---
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/rowers/templates/redesign_analysis.html b/rowers/templates/redesign_analysis.html
index 436a5444..20dfc9c7 100644
--- a/rowers/templates/redesign_analysis.html
+++ b/rowers/templates/redesign_analysis.html
@@ -6,8 +6,9 @@
 <h1>Main</h1>
 
 <ul class="main-content">
-  <li class="landscape"><img src="http://placehold.it/1200x1000" alt="placeholder"></li>
-  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="grid_4"><img src="http://placehold.it/1200x1000" alt="placeholder"></li>
+  <li class="grid_2"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="grid_2"><img src="http://placehold.it/350x200" alt="placeholder"></li>
   <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
   <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
@@ -16,15 +17,13 @@
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape">
+  <li class="grid_4">
     <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
       <ul>
         <li>One</li>
         <li>Two</li>
         </ul>
     </p>
-  </li>
-  <li class="landscape">
     <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
     </p>
   </li>
diff --git a/static/css/styles2.css b/static/css/styles2.css
index 7a53a391..0498af0c 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -352,10 +352,14 @@
     margin: 0;
 }
 
-.main-content li.landscape {
+.main-content li.grid_2 {
     grid-column-end: span 2;
 }
 
+.main-content li.grid_4 {
+    grid-column-end: span 4;
+}
+
 .main-content li img {
     display: block;
     width: 100%;
@@ -398,10 +402,17 @@
 
    .main-content {
        display: grid;
-       grid-template-columns: repeat(1,1fr);
+       grid-template-columns: repeat(2,1fr);
        grid-gap: 10px;
    }
 
+   .main-content li.grid_2 {
+       grid-column-end: span 2;
+   }
+
+   .main-content li.grid_4 {
+       grid-column-end: span 2;
+   }
   
 }
 
@@ -430,10 +441,18 @@
 
    .main-content {
        display: grid;
-       grid-template-columns: repeat(2,1fr);
+       grid-template-columns: repeat(4,1fr);
        grid-gap: 10px;
    }
 
+   .main-content li.grid_2 {
+       grid-column-end: span 2;
+   }
+
+   .main-content li.grid_4 {
+       grid-column-end: span 4;
+   }
+
 }