Sommaire

Un bloc plein écran

Si vous souhaitez n’avoir qu’un seul bloc dans toute la largeur de la ligne, utilisez conjointement les classes .column et .row.

Voici le code HTML à utiliser :

<div class="column row"> 
  <p>Cum sociis natoque penatibus...</p> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 03 / 03-grille-g.html.

Voici les sélecteurs utilisés :

.column.row, .row.columns { 
  float: none; 
} 
.row::after { 
  clear: both; 
} 
.column, .columns { 
  width: 100%; 
  float: left; 
  padding-left: 0.9375rem; 
  padding-right: 0.9375rem; 
} 
.row::before, .row::after { 
  content: ’ ’; 
  display: table; 
} 
.row { 
  max-width: 75rem; 
  margin-left: auto; 
  margin-right: auto; 
}