[Résolu] Grid CSS – Problème template area

Bonjour,

Je suis débutante à l'utilisation du Grid CSS.
Je souhaite créer un calendrier de l'avent, mais malheureusement, en suivant un tuto pour mettre les cases du calendrier en grid, je remarque les cases ne veulent pas s'aligner entre elles. En effet, elles font l'effet de block et chaque case saute à la ligne.

J'ai essayé de modifier le grid-template-area, mais rien ne marche. Si je modifie le display des div days en inline ou même en grid à nouveau, ils ne me donne pas le résultat voulu.

Voici mon code :

<div id="container">
  <section id="grid">
    <div class='day-1'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>1</div>
          <div class='back'></div>
         </div>
      </input> 
    </label>
  </div>
  <div class='day-2'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>2</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-3'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>3</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-4'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>4</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-5'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>5</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-6'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>6</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-7'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>7</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-8'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>8</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-9'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>9</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-10'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>10</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-11'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>11</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-12'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>12</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-13'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>13</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-14'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>14</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-15'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>15</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-16'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>16</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-17'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>17</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-18'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>18</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-19'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>19</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-20'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>20</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-21'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>21</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-22'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>22</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-23'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>23</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  <div class='day-24'>
    <label>
      <input type='checkbox'>
        <div class='door'>
          <div class='front'>24</div>
          <div class='back'></div>
        </div>
      </input>
    </label>
  </div>
  </section>
</div>
  <div class="bottom-snow">
          <span></span>
        </div>

* {
  margin: 0;
  padding: 0;
}
/*---snow*/
/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 50% {background-color:#b4cfe0;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}


body {
	background-color: purple; 
	background-image: url('https://designshack.net/tutorialexamples/letitsnow/snow.png'), url('https://designshack.net/tutorialexamples/letitsnow/snow3.png'), url('https://designshack.net/tutorialexamples/letitsnow/snow2.png');
	
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}

#container {
	width: 1000px;
	margin: 200px auto;
	text-shadow: 0px 0px 4px rgba(255,255,255, 0.5);
}

/*---bottom snow*/
.bottom-snow{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: block;
	height: 51px;
	background-color: #fff;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	overflow: hidden;
}
.bottom-snow span{
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 15px;
	display: block;
	background-color: #f4e5f9;
	border-radius: 4px;
}
.bottom-snow-over{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	display: block;
	height: 51px;
	z-index: 60; 
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	overflow: hidden;
}
.bottom-snow-over span{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 65%;
	display: block;
	height: 15px;
	background-color: #f4e5f9;
	z-index: 1; 
	border-radius: 4px;
}

/*---grid*/
.grid {
  display: grid;
  width: 90%;
  margin: 20px auto;
   
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-row-gap : 25px;
  grid-column-gap: 25px;
 }

section div {
  padding: 40px;
}

section > div {
  background: #f5f7f8;
}

/* individual items */
  .title {
    grid-area: t;
    grid-column: 1 / 3;
    grid-row: 1;
  }
  .day-1 {
    grid-area: d1;
    grid-column: 2 / 3;
    grid-row: 1;
  }
  .day-2 {
    grid-area: d2;
  }
  .day-3 {
    grid-area: d3;
  }
  .day-4 {
    grid-area: d4;
  }
  .day-5 {
    grid-area: d5;
  }
  .day-6 {
    grid-area: d6;
  }
  .day-7 {
    grid-area: d7;
  }
  .day-8 {
    grid-area: d8;
  }
  .day-9 {
    grid-area: d9;
  }
  .day-10 {
    grid-area: d10;
  }
  .day-11 {
    grid-area: d11;
  }
  .day-12 {
    grid-area: d12;
  }
  .day-13 {
    grid-area: d13;
  }
  .day-14 {
    grid-area: d14;
  }
  .day-15 {
    grid-area: d15;
  }
  .day-16 {
    grid-area: d16;
  }
  .day-17 {
    grid-area: d17;
  }
  .day-18 {
    grid-area: d18;
  }
  .day-19 {
    grid-area: d19;
  }
  .day-20 {
    grid-area: d20;
  }
  .day-21 {
    grid-area: d21;
  }
  .day-22 {
    grid-area: d22;
  }
  .day-23 {
    grid-area: d23;
  }
  .day-24 {
    grid-area: d24;
  }

/* media query */
@media only screen and (min-width: 500px) {
}

Pourriez-vous m'aider ?

Merci.
Modifié par Hainely (29 Nov 2019 - 16:04)

Salut

J'ai essayé de recréer ton cas ici : https://codepen.io/JUSEN/pen/YzPKwjp

est ce bon ? si il manque des choses, ajoutes les, sauvegarde et depuis ce liens on pourras tester/corriger le reste.

Oui c'est exactement ce que ça me fait.

Au final, j'ai réussi à régler le problème.
En effet, la balise grid où j'ai mis les propriétés du grid-template-area était stipulé avec un id et non une classe. Ce qui ne permet pas d'aller vers les div day et donner les propriétés CSS voulu.

Merci quand même à toi !

Ok top ! sinon y'avait Flex ! en deux lignes CSS et c'était fait

https://codepen.io/JUSEN/pen/RwNbrmg