Rendre responsive des div inclus dans un div carré

**JPBruneau** · 13/06/2023, 03h07

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 !

**Doksuri** · 13/06/2023, 09h16

quelque chose comme ca ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
  }
 
}

**JPBruneau** · 13/06/2023, 10h48

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

En tout cas merci d'avoir répondu si vite, et j'ai hâte de ta réponse.
Jean-Pierre

**Doksuri** · 13/06/2023, 11h51

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

**JPBruneau** · 13/06/2023, 18h17

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.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
 
<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

**Doksuri** · 14/06/2023, 09h24

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**JPBruneau** · 14/06/2023, 14h35

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.

**NoSmoking** · 15/06/2023, 11h06

Bonjour,

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Doksuri** · 15/06/2023, 13h57

Envoyé par NoSmoking

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.grid-center  {
  justify-content: center;
  margin: auto;
}

c'est le conteneur qu'il veut placer au centre, pas les contenus

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

**NoSmoking** · 15/06/2023, 16h30

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.grid-wrapper {
  position:sticky;
  top:0;
}

... mais bon ... l'essentiel étant que cela réponde à la demande !

Rendre responsive des div inclus dans un div carré

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager