108 lines
2.1 KiB
HTML
108 lines
2.1 KiB
HTML
<!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> |