Conflitto tra classi in una griglia

[ivanisevic82]

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:

<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!

[ivanisevic82]

Aggiungo una integrazione, per rendere la questione ancora più chiara e semplice...guardate questo codice:

<style>
.box {
  background-color: #2196F3;
}


.uno {
  font-size: 5px;
}


.due {
  font-size: 25px;
}


.tre {
  font-size: 45px;
}


.quattro {
  font-size: 65px;
}


.cinque {
  font-size: 85px;
}
</style>


<div class="box">
    <div class="uno">UNO</div>
    <div class="due">DUE</div>
    <div class="tre">TRE</div>
    <div class="quattro">QUATTRO</div>
    <div class="cinque">CINQUE</div>
</div>

Non riesco a spiegarmi perché lo stile font-size viene applicato solo alle classi "UNO" e "TRE" e non alle altre.

[KillerWorm]

Ciao, ho provato i codici che hai postato (presi così come sono) ma non riscontro alcun problema. Il font-size viene applicato correttamente in tutti i casi.

Posso pensare che tu stia usando questo codice all'interno di un progetto più ampio e che ci sia dell'altro CSS o qualche altro fattore (ad es. HTML malformato) che magari influisce sul risultato finale; va da sé che è difficile aiutarti senza vedere la pagina in azione.

Se possibile, posta il link della pagina online o, attraverso qualche playground (es. jsfiddle) proponi un esempio in cui è possibile riscontrare e verificare direttamente il problema.

[Vincent.Zeno]

edit: rimosso. niente... m'ero distratto con la salsicce sul fuoco

ri-edit: anche da me funzionano entrambi gli esempi

[ivanisevic82]

Ciao a tutti e grazie per le risposte.

Alla fine ho utilizzato uno strumento di correzione automatica del codice: è venuto fuori che non funzionava perché nel css c’erano degli spazi prima delle classi non funzionanti.

Ho fatto la prova con il “try it” di w3c, ed effettivamente il codice con gli spazi in più non risultava funzionante (cosa che non mi era mai capitata prima).

Purtroppo anche volendo non avrei potuto mostrarvi il sito per intero in quando ci sto lavorando offline con mamp.

Grazie come sempre per la disponibilità!

[Vincent.Zeno]

nel css c’erano degli spazi prima delle classi non funzionanti

anche il mio editor mi faceva notare gli spazi in eccesso... ma non ci davo peso.
buono a sapersi.