Noções básicas sobre CSS Grid (1 parte): contêiner de grade

Saudações! Apresento a você a tradução do artigo “Entendendo CSS Grid: Criando um Contêiner de Grade”, por Rachel Andrew

Embora a tecnologia CSS Grid tenha começado a ser suportada por alguns navegadores em 2017, muitos desenvolvedores ainda não tiveram a oportunidade de usá-la em seus projetos. A tecnologia CSS Grid traz muitos novos recursos e valores. Por isso, pode parecer complicado. No entanto, muitas das ferramentas usadas são intercambiáveis, o que significa que você não precisa estudar toda a especificação para começar. O objetivo da série Noções básicas sobre CSS Grid é orientar os leitores do iniciante ao especialista.

Este artigo inicial falará sobre o que acontece quando você cria um contêiner de grade e sobre várias propriedades que você pode aplicar ao pai para controlar a grade. Você aprenderá que, em algumas situações, apenas as propriedades aplicadas ao contêiner da grade são suficientes.

Neste artigo, consideraremos:

• 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

Criar uma grade e permitir que o navegador coloque automaticamente elementos nela abre grandes oportunidades em termos dos resultados que podem ser alcançados. Até o momento, não consideramos o posicionamento dos elementos na grade, mas muitas vezes ao desenvolver usando CSS Grid, eles não o usam. Em vez disso, eles simplesmente confiam no layout na ordem de origem usual: um elemento em cada célula.

Se você é novo no CSS Grid, uma boa maneira de começar a usá-lo é brincar com as dimensões das faixas e ver como os elementos se encaixam nas células criadas.