Menu grid 6 lignes séparer en trois colones

Version imprimable

1 pièce(s) jointe(s)

Bonjour et merci à ceux qui voudrons bien prendre de leurs temps pour m'aider.

Je veut faire un menu comme ceci:
Pièce jointe 577941

j'ai fait le html suivant:

Code:

1
2
3
4
5
6
7
8
9
 <section class="grid-item deux grid-container-time">
        <h1 class="title-red">Horraires</h1>
        <section class="bleu">Heure Film Salle</section>
        <section class="white">12h tommy 1</section>
        <section class="gris-f">14h in the wood 1</section>
        <section class="white">14h le chien perdu 2</section>
        <section class="gris-f">18h lavoir et les seins 1</section>
        <section class="white">18h truqueur sur gage 2</section>           
      </section>

Et le CSS qui va avec:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.grid-item{	
	border: 2px solid #222222;	
}
 
.grid-container-time {
	display: grid;
	grid-template-columns:1fr;    
	}
.bleu{ 
	background-color:#527bea;	
  }
  .white{
	  background-color: white;
	}
  .gris-f{
	  background-color: #858585;
  }

Évidement ça ne donne pas le résultat attendu.
SI vous avez une idée ou une solution à me proposé je suis preneuse

pourquoi ne pas utiliser les <table> (qui se prete a cette situation) ?

Code:

1
2
3
4
5
6
7
8
9
<h1>Horaires</h1>
<table>
  <tr><th>Heure</th><th>Film</th><th>Salle</th></tr>
  <tr><td>12h</td><td>tommy</td><td>1</td></tr>
  <tr><td>14h</td><td>in the wood</td><td>1</td></tr>
  <tr><td>14h</td><td>le chien perdu</td><td>2</td></tr>
  <tr><td>18h</td><td>lavoir et les seins</td><td>1</td></tr>
  <tr><td>18h</td><td>truqueur sur gage</td><td>2</td></tr>
</table>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
h1 {
  color: white;
  background-color: rgb(193 0 0);
  width: 170px;
  padding: 10px 0;
  text-align: center;
}
table {
  width: 100%;
  background-color: white;
  text-align: center;
}
table td:first-letter { text-transform: capitalize; }
table tr:nth-of-type(odd) { background-color: #858585; }
table tr:nth-of-type(1) { color: white; background-color: #527bea; }
table tr th:nth-of-type(1){ width: 50px; }
table tr th:nth-of-type(3){ width: 50px; }

27/08/2020, 17h11
nagyp

remerciement Doksuri

merci de votre aide.
Sincèrement j’aurais jamais trouver ça.
plus que quelque souci à régler et tout est bon.