Notation abrégée des propriétés de grille CSS
La propriété grid est une
forme abrégée pour écrire toutes les propriétés des colonnes
et des rangées du conteneur de grille. Toutes
les valeurs sont écrites sur une seule ligne, séparées par une barre oblique.
Via grid, on ne peut décrire sur une seule ligne
qu'un seul type de propriétés -
les propriétés explicites (grid-template-rows,
grid-template-columns,
grid-template-areas)
ou implicites (grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
Les propriétés qui
ne sont pas spécifiées
prennent leurs valeurs par défaut.
Exemple
Créons un tableau
à l'aide de la propriété grid :
<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, donnons aux deuxième et troisième rangées la même hauteur, et à chaque colonne une largeur différente :
<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: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, dans le tableau de l'exemple précédent, faisons la rangée du haut d'une hauteur de deux fractions (fr), et la première colonne d'une demi-fraction :
<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: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Tâches pratiques
Implémentez l'exemple suivant :
Implémentez l'exemple suivant :
Implémentez l'exemple suivant :
