preface

Continue with the items properties from the previous article. The container property determines which box items should be placed in. Feeling?? A grid layout writes body?? Can solve the entire web page?


Grid-column -start/grid-column-end /grid-row- start /grid-row-end

Use the beginning and end of the horizontal (vertical) line to place the item in the grid.

.item-1 {
  grid-column-start: 2;
  grid-column-end: 5; // five;
  grid-row-start: 1;
  grid-row-end: 3;	//row1-start;
}
Copy the code

We can also use the name of the line.

Alternatively, you can use span to indicate “span”, which is how many grids are crossed between the left and right (top and bottom) borders.

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}
Copy the code

Note: As a shorthand, the grid can default to span 1 and start stacking from the top left corner.

.item-b {
  grid-column-end: span 3;
  grid-row-start: 2
  grid-row-end: span 2;
}
Copy the code

Grid-column/grid-row

Grid-column-start + grid-column-end, and grid-row-start + grid-row-end.

Straight chestnuts:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / span 1;
}
Copy the code

Third, the grid – area

The name used to reference an area in grid-template-area. Grid-row-start + grid-column-start + grid-row-end + grid-column-end

Four, the justify – self/align – self

Aligns the contents of the Grid Item along the row axis (as opposed to align-self, which aligns along the column axis). This property applies to content within a single grid item.

  • Start – Aligns the content to the left end of the grid area
  • End – Aligns the content to the right end of the grid area
  • Center – Aligns the content to the middle of the grid area
  • Stretch – The width to fill the mesh area (this is the default)

The effect is the same as the precy-items /align-items keyword, which is not restated.