Rendre responsive des div inclus dans un div carré

Version imprimable

13/06/2023, 03h07
JPBruneau

Rendre responsive des div inclus dans un div carré

j'ai un div placé en position fixe et Top 10px left 10px
En écran ordinateur, il fait 378 pixels X 378pixels.
c'est un échiquier et il possèdes 9 DIV X 9 DIV ayant besoins d'une "case" sur toutes les lignes
et colonnes .
Voila qui est bien simple, sauf que je ne sais pas rendre le div responsable (si ça c'est facile) mais qu'il entraine le redimension
de tout les DIV contenus !

Merci de votre aide !

quelque chose comme ca ?

Code:

<div id="board"></div>

Code:

1
2
3
4
5
6
7
8
9
10
#board {
  display:grid;
  width: 100vw;
  height: 100wh;
  grid-template-rows: repeat(9, 1fr);
  grid-template-columns: repeat(9, 1fr);
}
#board div:nth-child(2n) {
  background-color: #ccc;
}

Code:

1
2
3
4
5
6
7
8
9
const $board = document.getElementById('board');
for(let line=1; line <=9; ++line) {
	for(let col=1; col<=9; ++col) {
  const cell = document.createElement('div');
  cell.textContent = `${line}-${col}`;
  $board.append(cell);
  }
 
}

13/06/2023, 10h48
JPBruneau

Citation:

Envoyé par Doksuri

quelque chose comme ca ?
ETC...

Je crois que ce serait bien mais c'est quel javascript ? , je suis à 84 ans en janvier, de l'ancienne école, peux tu m'aider sur ce point ?
car j'ai réalisé un mini HTML5 et ça donnes rien ?
je n'avais jamais vue de "$" dans du JS 8O

En tout cas merci d'avoir répondu si vite, et j'ai hâte de ta réponse.
Jean-Pierre
13/06/2023, 11h51
Doksuri

ah, pardon... voici un jsfiddle du rendu jsfiddle.net/aL27shfw/

ce qu'il faut retenir, est le display:grid en css

j'ai fais du JS pour "populer" mon div (pas envis d'ecrire les 81 cases a la main ;) )
le $ dans mon nom de variale $board, c'est une convention perso : quand je vois une variable JS qui commence par un $, je sais que je parle d'un element du DOM

Citation:

Envoyé par Doksuri

ah, pardon... voici un jsfiddle du rendu jsfiddle.net/aL27shfw/
ce qu'il faut retenir, est le display:grid en css

Parfait mais si je mets tout ensemble, j'oserais demandé quel paramètre me permettrais d'obtenir un carré et si possible 400Px que je place
(souhaite placer hors du rap et content (je veux dire quelque soit le scroll) en top 10px en top et centré dans la page ?
Voici ton code tel que je l'ai actuellement. :roll:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <style> #board { display:grid; width: 100vw; height: 100wh; grid-template-rows: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr); } #board div:nth-child(2n) { background-color: #ccc; } </style> </head><body> <div id="board"> </div> <script type="text/javascript"> const $board = document.getElementById('board'); for(let line=1; line <=9; ++line) { for(let col=1; col<=9; ++col) { const cell = document.createElement('div'); cell.textContent = `${line}-${col}`; $board.append(cell); } } </script> </body></html>
Merci l'Ami

Citation:

Envoyé par JPBruneau

sauf que je ne sais pas rendre le div responsable (si ça c'est facile) mais qu'il entraine le redimension de tout les DIV contenus !

ah zut, j'avais lu responsive ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #board { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); display: grid; width: 400px; aspect-ratio: 1; grid-template-rows: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr); } #board div:nth-child(2n) { background-color: #ccc; } #board div { aspect-ratio: 1; }
position: fixed; pour enlever l'element du "flow"
aspect-ratio: 1; pour garder un carre
left: 50%; + transform: translateX(-50%); pour le centrer

14/06/2023, 14h35
JPBruneau

Citation:

Envoyé par Doksuri

ah zut, j'avais lu responsive ...
pour le centrer

La honte !! en tout cas c'est parfait et RESOLU grace surtout à toi ;)
Encore merci.
15/06/2023, 11h06
NoSmoking
Bonjour,

Citation:

Envoyé par Doksuri

left: 50%; + transform: translateX(-50%); pour le centrer

pour un élément en display:grid, le centrage peut se faire également avec :
Code:

1 2 3 4 .grid-center { justify-content: center; margin: auto; }
cela évite la création d'un contexte d'empilement qui peut éventuellement poser problème.
15/06/2023, 13h57
Doksuri
Citation:
Envoyé par NoSmoking

pour un élément en display:grid, le centrage peut se faire également avec :

Code:

1 2 3 4 .grid-center { justify-content: center; margin: auto; }
c'est le conteneur qu'il veut placer au centre, pas les contenus :koi:
l'element etant en position fixed, je vois mal comment le centrer autrement
15/06/2023, 16h30
NoSmoking
Citation:

l'element etant en position fixed, je vois mal comment le centrer autrement

je ne parlais pas de ce cas particulier mais d'une façon générale ;)

Dans le cas présent je passerais plutôt par un « wrapper » en position sticky, ce qui suit resterait ainsi consultable à l'écran.
Code:

1 2 3 4 <div class="grid-wrapper"> <div id="board" class="grid-center"></div> </div> <p>Du text en dessous...</p>
Code:

1 2 3 4 .grid-wrapper { position:sticky; top:0; }
... mais bon ... l'essentiel étant que cela réponde à la demande !