Grid layout basic concepts

  • Areas that use a grid layout are called containers.
  • Inside the container, grid-positioned child elements are called “items”.
  • The horizontal areas inside the container are called rows, and the vertical areas are called columns.
  • The area where rows and columns intersect is called a cell.
  • The lines that divide a grid are called grid lines.
  • The horizontal grid line divides the travel, and the vertical grid line divides the train.
  • Under normal circumstances,nRow hasn + 1Root horizontal grid line,mList ofm + 1Root vertical grid lines, such as three rows have four horizontal grid lines.

Grid layout properties fall into two categories. One class is defined on the container and is called container properties. The other category is defined on a project and is called project attributes.

Container attribute

The display properties

Specify a container with a grid layout.

  • display: gridSpecify a container with a grid layout.
  • display: inline-gridSets container elements to inline elements.

Grid-template-columns and grid-template-rows attributes

Once the container has specified the grid layout, the next step is to partition the rows and columns.

  • grid-template-columnsProperty defines the column width for each column
  • grid-template-rowsProperty defines the row height for each row.
  1. repeat()
  2. Auto – the fill keywords
  3. Fr keyword
  4. minmax()
  5. The auto keyword
  6. The name of the grid line
  7. Layout instance

Grid-row-gap, grid-column-gap, grid-gap

  • grid-row-gapProperty to set the row spacing (row spacing),grid-column-gapProperty sets the interval between columns (column spacing).
  • grid-gapAttributes aregrid-column-gapandgrid-row-gapThe syntax is as follows.

The grid – the template – areas attribute

Grid layouts allow you to specify “areas”, an area consisting of one or more cells. The grid-template-Areas attribute is used to define areas.

The grid – auto – flow properties

  • This order is determined bygrid-auto-flowProperty determines that the default value isrow, that is, “first, second”. Or I could set it to becolumn, becomes “first in line, then in line”.
  • grid-auto-flowProperty except set torowandcolumn, can also be set torow denseandcolumn dense. These two values are mainly used for how the remaining items are automatically placed after certain items are specified.

Context-items, align-items, place-items

  • justify-itemsProperty sets the horizontal position of cell contents (left, middle and right)
  • align-itemsProperty sets the vertical position of cell contents (top, middle, and bottom)
  • place-itemsAttributes arealign-itemsProperties andjustify-itemsThe merged short form of a property.

Context-content, align-content, place-content

  • justify-contentProperty is the horizontal position of the entire content area in the container (left, middle, and right)
  • align-contentProperty is the vertical position (top, middle, bottom) of the entire content area.
  • place-contentAttributes arealign-contentProperties andjustify-contentThe merged short form of a property.

Grid-template property, grid property

  • grid-templateAttributes aregrid-template-columns,grid-template-rowsandgrid-template-areasThe combined short form of these three properties.
  • gridAttributes aregrid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns,grid-auto-flowThe combined short form of these six properties.

The project properties

Grid-column-start attribute, grid-column-end attribute, grid-row-start attribute, grid-row-end attribute

The location of an item can be specified by specifying which grid line is located on each of the four borders of the item.

  • grid-column-startProperty: Vertical gridline with the left border
  • grid-column-endProperty: Vertical gridline on which the right border is located
  • grid-row-startProperty: horizontal gridline on which the top border is located
  • grid-row-endProperty: horizontal gridline on which the bottom border is located

Grid-column property, grid-row property

  • grid-columnAttributes aregrid-column-startandgrid-column-endThe combined short form of
  • grid-rowAttributes aregrid-row-startProperties andgrid-row-endThe combined short form of.

The grid – area property

The grid-area property specifies which area the project is placed in.

Context-self, align-self, place-self

  • justify-selfProperty sets the horizontal position of the cell’s contents (left, middle, and right), andjustify-itemsAttributes are used exactly the same, but only for a single project.
  • align-selfProperty sets the vertical position of the cell’s contents (top, middle, bottom), andalign-itemsAttributes are used exactly the same and apply only to a single item.
  • place-selfAttributes arealign-selfProperties andjustify-selfThe merged short form of a property.

Refer to the link: www.ruanyifeng.com/blog/2019/0…