Comprendre la grille CSS (1 partie): conteneur de grille

Salutations! Je vous présente la traduction de l'article «Comprendre la grille CSS: créer un conteneur de grille» par Rachel Andrew

Bien que la technologie CSS Grid ait commencé à être prise en charge par certains navigateurs en 2017, de nombreux développeurs n'ont pas encore eu l'occasion de l'utiliser dans leurs projets. La technologie CSS Grid apporte de nombreuses nouvelles fonctionnalités et valeurs. Pour cette raison, cela peut sembler compliqué. Cependant, la plupart des outils utilisés sont interchangeables, ce qui signifie que vous n'avez pas besoin d'étudier la spécification entière pour commencer. L'objectif de la série Understanding CSS Grid est de guider les lecteurs du débutant à l'expert.

Cet article initial parlera de ce qui se passe lorsque vous créez un conteneur de grille et de diverses propriétés que vous pouvez appliquer au parent pour contrôler la grille. Vous apprendrez que dans certaines situations, seules les propriétés appliquées au conteneur de grille sont suffisantes.

Dans cet article, nous considérerons:

• grid- display: grid display: inline-grid
• grid-template-columns grid-template-rows
• ( / ) grid-auto-columns grid-auto-rows

:

• 1: Grid-
• 2: Grid-
• 3: Grid-

, CSS Grid. Rachel Andrew , .

,

Grid-

Grid, Flexbox, display. , , grid-, display: grid. , , , Grid. , grid-, .

, . - , . , , . .

, - , grid-, grid-. , , <span>, , grid-.

<span> . grid-:

• <div>
• <span>
• <span>
• <span>

Firefox Grid Inspector, , .

, display: inline-grid; grid- . , , grid-. display . grid- , , .

grid, , , . , .

: , display: block grid, display: inline grid . display "Digging Into The DIsplay Property: The Two Values Of Display".

- , . grid-template-columns grid-template-rows. , "track-list" ( ).

, . grid-template-columns , grid-template-rows – .

:

• grid-template-columns: 100px 100px 200px – . 100px, – 100px, – 200px
• grid-template-columns: min-content max-content fit-content(10em) – . min-content, – max-content. max-content, 10em, – 10em.
• grid-template-columns: 1fr 1fr 1fr – , fr. grid- .
• grid-template-columns: repeat(2, 10em 1fr) – 10em 1fr 10em 1fr, repeat() .
• grid-template-columns: repeat(auto-fill, 200px) – 200px, , , .
• grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) – 200px, , .
• grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end] – . , 1 , – 3 . .

, . , , , .

. grid-, , . - , align-content justify-content start. , , How To Align Things In CSS.

min-content, max-content fit-content().

min-content , , , . , , , . , .

max-content , , .

fit-content . , . , max-content, , , . , . , , .

CSS Grid How Big Is That Box? Understanding Sizing In CSS Layout.

, , , . , float flex , , 100, .

«fr»

CSS Grid , , fr. cacl(); , grid-.

, 1fr 1fr 1fr, 3 . 2fr 1fr 1fr, 4, 2 , .

, " " – . - , , , .

ItemThree. - , .

fr . , .

– , fit-content(300px), 1fr. , - 300px, , , , fr . - (, max-width: 100%), 300px, . fr fit-content – .

repeat()

repeat() .

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(12, 1fr);

repeat(), , . . , .

repeat() . , 1fr, 200px 1fr.

grid-template-columns: 1fr repeat(3,200px) 1fr

, , auto-fill auto-fit. , , grid- , .

, , . 500px, 200px .

grid-, , . minmax() . = 200px, = 1fr, 200px, , = 1fr, , .

: auto-fill auto-fit. , , . – .

auto-fill , .

auto-fit, .

Firefox Grid Inspector , , , 0px. – 3, .

. CSS Grid, . , . . , . , .

grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

, span, , .

: , . "Naming Things in CSS Grid Layout, .

grid-template-columns grid-template-rows . , .

grid- , , , . . , display: grid grid-. , , , .

grid-auto-rows grid-auto-columns. , , 200px , , :

grid-auto-rows: minmax(200px, auto)

, , 100px ( , ), .

grid-auto-rows: auto 100px

Créer une grille et permettre au navigateur de placer automatiquement des éléments dessus ouvre de grandes opportunités en termes de résultats qui peuvent être obtenus. Jusqu'à présent, nous n'avons pas considéré le positionnement des éléments sur la grille, mais souvent lors du développement à l'aide de CSS Grid, ils ne l'utilisent pas. Au lieu de cela, ils s'appuient simplement sur la disposition dans l'ordre source habituel: un élément dans chaque cellule.

Si vous êtes nouveau dans CSS Grid, une bonne façon de commencer à l'utiliser est de jouer avec la taille des pistes et de voir comment les éléments s'intégreront dans les cellules que vous créez.