Bonjour,

Je sus en train d'essayer de mettre en place un planning avec du css, j'ai besoin d'avoir plusieurs colonnes pour les jours, avec les lignes pour les infos pour les jours en tête de colonne.

J'ai réussi à créer mon contenu (voir ci-dessous)

Nom : planning.png Affichages : 127 Taille : 44,9 Ko

Le truc, c'est que, en responsive j'ai mes colonnes qui se mettent les une en dessous des autres, mais ça ne respecte pas les jours de la semaine ...

L'idée lorsque ça se replace, serait de garder les contenus du lundi dans une colonne (1) ensuite le mardi (2) etc ... pour que la cohérence entre jours et infos soit respectée

Une idée ?

Je mets ici dessous mes tests, je ne suis pas bon en css, donc si vous avez des commentaires, je les prends volontiers


HTML :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<div class="planning_container">
	<div class="planning_box_titre">Lundi</div>
	<div class="planning_box_titre">Mardi</div>
	<div class="planning_box_titre">Mercredi</div>
	<div class="planning_box_titre">Jeudi</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box_vide">&nbsp;</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box_vide">&nbsp;</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box_vide">&nbsp;</div>
</div>
<div class="planning_container">
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
	<div class="planning_box">
		<p>08h30 - 09h15</p>
		<p>Test</p>
	</div>
</div>

Css
Code : 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
/* planning */
    .planning_container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      padding: 10px;
    }
 
    .planning_box_titre {
      background-color: #000000;
      color: white;
      font-weight:bold;
      padding: 20px;
      text-align: center;
      border-radius: 20px;
    }
 
    .planning_box {
      background-color: #000000;
      color: white;
      font-weight:bold;
      padding: 20px;
      text-align: center;
      border-radius: 20px;
    }
 
    .planning_box_vide {
 
      color: white;
      font-weight:bold;
      padding: 20px;
      text-align: center;
      border-radius: 20px;
    }