CSS - Cell

Les classes cell utilisent la propriété table-cell pour la gestion de l'affichage horizontal et la justification verticale.

Gestion affichage horizontal

En ajoutant simplement cell on modifie le display du bloc en table-cell.

<div class="cell bd-rouge">
  <p>cell bd-rouge</p>
</div>
<div class="cell bd-vert">
  <p>cell bd-vert<br>sur 2 lignes</p>
</div> 

Pour justifier sur la largeur du bloc parent, il faut l'inclure dans un bloc cell-row

<div class="cell-row">
  <div class="cell bd-rouge">
    <p>cell bd-rouge</p>
  </div>
  <div class="cell bd-vert">
    <p>cell bd-vert<br>sur 2 lignes</p>
  </div> 
</div>  

Il est possible d'utiliser les classes responsives w (witdh) pour gérer la largeur du conteneur et des cellules. Notez l'utilisation de m-center pour le centrage du bloc

<div class="cell-row w80 mh-auto">
  <div class="cell w20 wm40 ws80 bd-rouge">
    <p>cell bd-rouge</p>
  </div>
  <div class="cell bd-vert">
    <p>cell bd-vert<br>sur 2 lignes</p>
  </div> 
</div>  

Attention: toutes les cellules sont sur la même ligne.

Justification verticale

Toutes les cellules d'une même ligne ont la même hauteur

<div class="cell-row tc">
  <div class="cell t-grisClair pr1">
    <p>1<br>2<br>3<br>4<br>5<br>6</p>
  </div>
  <div class="cell cell-top w33 bd-brun">
    <p class="bg-brun">Ce texte est affiché en haut</p>
  </div>
  <div class="cell cell-center w33 bd-brun">
  <div class="bg-inline bg-brun p1 tl">Ce texte est affiché au centre<br>sur 2 lignes</div>
  </div>
  <div class="cell cell-bottom w33 bd-brun">
    <div class="bg-brun">Ce texte est affiché en bas</div>
  </div>
</div>

Les classes responsables de l'alignement vertical sont surlignées en jaune. Celles sur fond vert agissent sur l'alignement horizontal.

Notez, la méthode pour centrer un bloc dans un autre avec bg-inline (display:inline-block) & tc (text-align:center).