Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Cette mise en page classique du Saint-Graal comprend un en-tête, un pied de page, une barre latérale gauche, une barre latérale droite et un contenu principal. Elle est semblable à la précédente mise en page, mais inclut désormais des barres latérales.
Pour écrire toute cette grille en une seule ligne de code, utilisez la propriété grid-template. Vous pouvez ainsi définir à la fois les lignes et les colonnes.
La paire propriété/valeur est grid-template: auto 1fr auto / auto 1fr auto. La barre oblique entre la première et la deuxième liste séparée par des espaces correspond au saut entre les lignes et les colonnes.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Comme dans le dernier exemple, où l'en-tête et le pied de page étaient dimensionnés automatiquement, les barres latérales gauche et droite sont automatiquement dimensionnées en fonction de la taille intrinsèque des enfants. Toutefois, il s'agit cette fois d'une taille horizontale (largeur) au lieu de verticale (hauteur).
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2023/10/25 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Il n'y a pas l'information dont j'ai besoin"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Trop compliqué/Trop d'étapes"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsolète"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problème de traduction"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Mauvais exemple/Erreur de code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Autre"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile à comprendre"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"J'ai pu résoudre mon problème"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Autre"
}]
{"lastModified": "Derni\u00e8re mise \u00e0 jour le 2023/10/25\u00a0(UTC)."}
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2023/10/25 (UTC)."],[],[]]