Understanding CSS Grid (Part 2): Grid Lines

Understanding CSS Grid: Grid Lines Translation by Rachel Andrew

In the first article in the Understanding CSS Grid series, we looked at how to create a parent grid container and the various properties that apply to this element. When the grid is created, we have at our disposal a set of grid lines. In this article, you will learn how to arrange elements along these lines by adding properties to the children of the grid container.

We cover the following points:

1. grid-column-start, grid-column-end, grid-row-start, grid-row-end grid-column and grid-row
2. grid-area grid-
5. span subgrid

:

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

, CSS Grid. Rachel Andrew , .

,

, , , , . , , , 5 , , , CSS. , ( ), , .

.item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}

: – , , – .

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 4;
}

CodePen , .

, , align-self justify-self stretch.

, ( ), , , . , ( ) – , , – . , 2 3 , :

.item {
  grid-column: 2 / 3;
}

, , :

.item {
  grid-column: 2;
}

"grid-area"

grid-area. , , . .

.item {
  grid-area: 1 / 2 / 4 / 4;
}

: grid-row-start, grid-column-start, grid-row-end, grid-column-end. , (, ), , , , . , , , CSS , , , margin.

, Grid , , , . , , , . , , grid-column grid-row .

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

. 1 , . , 1 , 1 – .

, (, ), 1 , 1 , .

( writing-mode: vertical-rl), 1 . 1 – .

, grid- , .

-1, , -2 . , , , :

.item {
  grid-column: 1 / -1;
}

, 1. , , , 5em grid-auto-rows.

placed grid-row: 1 / -1, , 1 -1. , . , ( -1) 2, 3.

, , .

, , . .

.grid {
  display: grid;
  grid-template-columns: [full-start] 1fr [main-start] 2fr 2fr [main-end full-end];
}

.

.item {
  grid-column: main-start / main-end;
}

, , .

: . « CSS Grid»

, . , repeat(). 8 , 4- 1fr 2fr. sm, – lg. , 4 .

. , , sm lg, grid-column: sm 2 / lg 3. , .

"span"

, , ( ), , . , , , , , . span. auto ( , ) 3 .

.item {
  grid-column: auto / span 3;
}

, subgrid grid-template-columns grid-template-rows. , , , , . subgrid ( , ). CodePen- , Firefox .

, CSS Grid , . , . , .

, . , . , . z-index. , z-index ́ , . , .

""

, . , – , .

, , . grid-auto-flow dense. , , , , . "" , 3 2.

, , Tab, .

, , - . "" , .

, 1 2 , . , .

, , .

Finally

That's almost all you need to know about grid lines. Remember that numbered lines are always available to you. No matter how you use the grid, you can always move an element from one line to another. The methods that we will cover in future articles will present alternative ways of specifying a layout, but will still be based on a grid created using numbered lines.