Grilles explicites
Le système de grille implique l'utilisation explicites et de grilles implicites. Analysons ces concepts plus en détail.
Une grille explicite représente un ensemble d'éléments placés en colonnes et en rangées. Souvent, la grille explicite est créée manuellement et toutes les grilles que nous avons créées ensemble dans les leçons précédentes sont explicites (par exemple, la leçon Carrelage en grille).
Créons une grille qui sera notre grille explicite :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
