Understanding CSS Grid (1 part): Grid container

Greetings! I present to you the translation of the article “Understanding CSS Grid: Creating A Grid Container” by Rachel Andrew

Although CSS Grid technology began to be supported by some browsers back in 2017, many developers have not yet had the opportunity to use it in their projects. CSS Grid technology brings many new features and values. Because of this, it may seem complicated. However, many of the tools used in it are interchangeable, which means that you do not need to study the entire specification to get started. The goal of the Understanding CSS Grid series is to guide readers from beginner to expert.

This initial article will talk about what happens when you create a grid container and about various properties that you can apply to the parent to control the grid. You will learn that in some situations, only the properties applied to the grid container are sufficient.

In this article we will consider:

• 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

Creating a grid and allowing the browser to automatically place elements on it opens up great opportunities in terms of the results that can be achieved. So far, we have not considered the positioning of elements on the grid, but often when developing using CSS Grid they do not use it. Instead, they simply rely on the layout in the usual source order: one element in each cell.

If you are new to CSS Grid, a good way to start using it is to play around with the dimensions of the tracks and see how the elements will fit in the created cells.