From 02b26a987ae69b6d8f3efcd4d8c70058fa7959c1 Mon Sep 17 00:00:00 2001
From: hugogogo <hugogogo@protonmail.com>
Date: Tue, 26 Jan 2021 11:23:22 +0100
Subject: [PATCH] mise en place de grid

---
 pages/litterall.html | 66 ++++++++++++++++++++++++--------------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/pages/litterall.html b/pages/litterall.html
index 9a406f7..92f0079 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -19,32 +19,38 @@
 				width: calc(98%);
 			}
 			.horizontal {
+				display: flex;
 				flex-direction: raw;
 			}
 			.horizontal > * {
 				margin: 20px auto;
 			}
 			.vertical {
+				display: flex;
 				flex-direction: column;
 			}
 			.vertical > * {
 				margin: 20px auto;
 			}
 			.img_container {
-				flex-grow: 0;
-				justify-content: flex-start;
-				margin-left: -2px;
+				width: 100%;
+
 			/*
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: center;
+				margin-left: -2px;
+			*/
+
 				display: grid;
-      			grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
-	    	    grid-gap: 16px;
+      			grid-template-columns: repeat(auto-fill, minmax(120px, max-content));
+	    	    grid-gap: 2px;
 		        justify-content: center;
 		        padding: initial;
-			*/
 			}
-			.img_container img {
+			.img_container > * {
 				margin: 2px;
-				border: 1px solid grey;
+				border: 1px solid lightgrey;
 			}
 		</style>
 	</head>
@@ -66,29 +72,29 @@
 				<p>
 					Vestibulum ultricies nisl in elit pulvinar, ac dignissim libero finibus. Aenean bibendum venenatis augue, quis convallis metus facilisis at. Suspendisse risus mi, bibendum eget urna vel, consectetur rutrum purus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin tincidunt mollis ante eget iaculis. Donec a finibus nisl, at hendrerit diam. Phasellus eget magna et nisi feugiat bibendum. Donec pretium nisi sit amet lorem volutpat venenatis.
 				</p>
-				<img class="centre" src="./docs/revues/litt23.jpg" alt="revue litterall" width="240">
+				<img class="centre last" src="./docs/revues/litt23.jpg" alt="revue litterall" width="240" height="410">
 				<div class="img_container">
-					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="240">
-					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="240">
+					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt22.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt20.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt17.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt19.jpg" alt="revue litterall" width="120"  height="205">
+					<img class="horizontal" src="./docs/revues/litt21.jpg" alt="revue litterall" width="120"  height="205">
 				</div>
 			</article>
 		</main>