From bcf5375310ece1f9a90e99b270cdbae28c4d2831 Mon Sep 17 00:00:00 2001 From: julieng Date: Mon, 15 Nov 2021 21:41:03 +0100 Subject: convert content to md --- files/fr/glossary/grid/index.md | 67 ++++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 34 deletions(-) (limited to 'files/fr/glossary/grid/index.md') diff --git a/files/fr/glossary/grid/index.md b/files/fr/glossary/grid/index.md index b5e9b22b88..d3772b846f 100644 --- a/files/fr/glossary/grid/index.md +++ b/files/fr/glossary/grid/index.md @@ -8,17 +8,18 @@ tags: translation_of: Glossary/Grid original_slug: Glossaire/Grid --- -

Une grille CSS est définie en utilisant la valeur grid de la propriété display ; vous pouvez définir les colonnes et les lignes de votre grille en utilisant les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}.

+Une grille _CSS_ est définie en utilisant la valeur `grid` de la propriété `display` ; vous pouvez définir les colonnes et les lignes de votre grille en utilisant les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. -

La grille que vous définissez avec ces propriétés est décrite comme une grille explicite.

+La grille que vous définissez avec ces propriétés est décrite comme une _grille explicite_. -

Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (track) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (grid items), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies.

+Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (_track_) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (_grid items_), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies. -

Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites.

+Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites. -

Exemple

+## Exemple - +``` -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-template-rows: 100px 100px;
 }
-
+``` -
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-   <div>Six</div>
-   <div>Seven</div>
-   <div>Eight</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
Six
+
Seven
+
Eight
+
+``` -

{{ EmbedLiveSample('Exemple', '500', '330') }}

+{{ EmbedLiveSample('Exemple', '500', '330') }} -

En apprendre plus

+## En apprendre plus -

Références de la propriété

+### Références de la propriété - +- {{cssxref("grid-template-columns")}} +- {{cssxref("grid-template-rows")}} +- {{cssxref("grid")}} +- {{cssxref("grid-template")}} -

En lire plus

+### En lire plus - +- Guide des grilles CSS : _[Les  concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)_ -- cgit v1.2.3-54-g00ecf