Ciao a tutti, avrei bisogno del vostro prezioso aiuto per risolvere la problematica in oggetto.

Mi trovo ad utilizzare per la prima volta delle griglie css e sto incontrando un problema di conflitto tra classi.

Riporto di seguito il codice:

codice HTML:
<style>.grid-container {  display: grid;  grid-template-columns: auto auto auto;  background-color: #2196F3;  padding: 10px;}.grid-item {  background-color: rgba(255, 255, 255, 0.8);  border: 1px solid rgba(0, 0, 0, 0.8);  padding: 20px;  font-size: 35px;  text-align: center;}
.titolo_griglia {  font-size: 25px;}
.contenuto_griglia {  font-size: 15px !important;}
.immagine_griglia {  width: 400px;  height: 200px;}</style>
<div class="grid-container">  <div class="grid-item">    <div class="titolo_griglia">TITOLO</div>      <div class="contenuto_griglia">Contenuto</div>  <div class="leggi"><a href="http://...">LEGGI DI PIÙ</a> </div>  </div>    <div class="grid-item">2</div>  <div class="grid-item">3</div>    <div class="grid-item">4</div>  <div class="grid-item">5</div>  <div class="grid-item">6</div>    <div class="grid-item">7</div>  <div class="grid-item">8</div>  <div class="grid-item">9</div>  </div>
Ecco cosa accade:

- La classe "titolo_griglia" funziona correttamente;

- La classe "contenuto_griglia", NON funziona correttamente, in quanto (non so per quale ragione), prende il "font-size" dalla classe superiore "grid-item";

- La classe "leggi" funziona correttamente.

In pratica solo una delle tre classe, che contrassegnano tre diversi div, eredita il font-size da una diversa classe, mentre le altre due classi funzionano correttamente.

Sapete dirmi perché questo accade?

Grazie!