concept

A grid layout consists of containers and child elements.

Container: Defines an elastic container by setting the display property to grid or inline-grid.

After the grid layout is set, float, display: inline-block, display: table-cell, vertical-align, and column-* of the container’s child elements are invalidated

Child element (item) : Each unit in the container is called a child element

The grid layout is divided into Rows, Cloums, and Gaps in the grid as shown below.

Grid lines: Normally, row N has N + 1 horizontal grid lines and column M has M + 1 vertical grid lines. As shown below:

Setting container Properties

Grid-template-columns: Sets the number and width of columns

/ / such as
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
 
// where repeat(3, 1fr) denotes 3 repeated 1fr widths
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
 
// Auto-fill indicates that the quantity is not limited
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
 
// Minmax (100px, 1fr) specifies the width range between 100px and 1fr
.container {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(100px, 1fr);
}
 
// Square brackets [c1] are the names of the corresponding grid lines
.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
Copy the code
  • Grid-template-rows: Sets the number and height of rows
  • Grid-column-gap: sets the column gap width
  • Grid-row-gap: Sets the row gap width
  • Grid-gap: short for grid-row-gap and grid-column-gap properties
  • Grid-template-areas: Defines areas
//. Indicates an undefined interval;
// The start grid line for each region is automatically named -start and the end grid line is automatically named -end
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
Copy the code
  • Grid-auto-flow: grid filling sequence, default row (first column followed column), other options include Row dense, column, column dense.
  • Illustration-content: Used to horizontally align the entire grid within the container.
  • Align-content: Used to vertically align the entire grid within the container.

Sets the child element properties

The child element is a cell by default, but can be changed by specifying which grid line the project’s four borders are located on.

  • Grid-row-start: Sets the grid line corresponding to the upper border

  • Grid-row-end: Sets the grid line corresponding to the bottom border

  • Grid-column-start: Sets the grid line corresponding to the left border

  • Grid-column-end: Sets the grid line corresponding to the right border

  • Grid-column: short for grid-column-start and grid-column-end.

// Indicates the period from 1 to 4
.item1 {
  grid-column: 1/4;
}
// Merge two cells
.item1 {
  grid-column: 1 / span 2; } grid-row: short for grid-row-start and grid-row-end. Grid-area: sets the name of the corresponding grid. item {grid-area:1 / 2 / 5 / 6;
}
Copy the code

reference

Other instructions

Developer.mozilla.org/zh-CN/docs/…

www.yuque.com/frank-mutde…

exercises

Developer.mozilla.org/zh-CN/docs/…