Raccourci pour les rangées et les colonnes dans les grilles CSS

Il existe des situations où il est pratique de spécifier les dimensions des rangées et des colonnes sous une forme abrégée. Pour cela, nous utilisons la propriété grid-template, qui est spécifiée dans l'élément parent et représente une forme abrégée d'écriture des deux propriétés grid-template-rows et grid-template-columns.

Les rangées et les colonnes pour le conteneur de grille sont spécifiées par une barre oblique, leurs dimensions sont définies en unités de mesure.

Exemple

Utilisons la propriété grid-template pour créer un tableau :

<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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Exemple

Maintenant, donnons aux deuxième et troisième rangées la même largeur, 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-template: 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 largeur de deux fractions, 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-template: 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 la tuile suivante :