template html & css

css/grid.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset="UTF-8">
+	<title>Grid</title>
+	<style>
+		.cluster {
+			width: 1200px;
+		}
+
+		.grid {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			width: 1200px;
+			height: 500px;
+		}
+
+		.box {
+			/* Centrage Horizontal du texte/inline (EXISTANT) */
+			text-align: center;
+
+			/* NOUVEAUX STYLES pour le Centrage Vertical */
+			/* 1. Transforme la boîte en conteneur Flex */
+			display: flex;
+
+			/* 2. Centre les éléments enfants sur l'axe vertical (axe croisé) */
+			align-items: center;
+
+			/* 3. Centre les éléments enfants sur l'axe horizontal (axe principal) */
+			/* C'est une alternative à text-align: center; pour les éléments de bloc */
+			justify-content: center;
+			/* dans la division */
+
+			padding: 4px;
+			background-color: #e1dfdf;
+			border: 1px solid black;
+			text-align: center;
+		}
+
+		.box_3 {
+			height: 100px;
+		}
+
+
+		.flexbox[data-flex-wrap] {
+			/* flex-wrap: wrap; */
+			flex-direction: column
+		}
+
+		.flexbox[data-space] {
+			justify-content: space-between;
+		}
+
+		.flexbox[data-align-center] {
+			align-items: center;
+		}
+
+		/* Presentation styles
+		.flexbox>* {
+			max-width: 500px;
+		}
+			 */
+	</style>
+
+	<script>
+		/*
+		document.addEventListener('DOMContentLoaded', function () {
+			// Ce code s'exécutera seulement après que tout le HTML sera chargé
+			const switches = document.querySelectorAll('[role="switch"]');
+			const flexbox = document.querySelector(".flexbox");
+
+			switches.forEach((item) => {
+				item.addEventListener("change", () => {
+					if (item.checked) {
+						flexbox.setAttribute(`data-${item.getAttribute("id")}`, "");
+					} else {
+						flexbox.removeAttribute(`data-${item.getAttribute("id")}`);
+					}
+				});
+			});
+		});
+		*/
+
+
+	</script>
+</head>
+
+<body>
+
+</body>
+
+
+<div class="cluster">
+	<div class="grid">
+		<div class="box">Item 1</div>
+		<div class="box">Item 2</div>
+		<div class="box">Item 3</div>
+		<div class="box">Item 4</div>
+		<div class="box">Item 5</div>
+		<div class="box">Item 6</div>
+		<div class="box">Item 7</div>
+		<div class="box">Item 8</div>
+		<div class="box">Item 9</div>
+	</div>
+</div>
+
+</html>