Grid layout is also known as grid layout, because there are too many attributes, in sorting out the god Ruan Yifeng’s blog, I write this blog, convenient for later when they read to deepen a little impression.

Parent box setup

Rows and columns

In grid layout, as in Flex, you need to set the display:grid property of the parent box and then set the number of rows and columns for the parent box.

.container{ display:grid; The grid - the template - rows: repeat (5), %); // Set the row grid-template-columns:repeat(5,20%); // Set column}Copy the code

The above code sets up a box of five rows and five columns, each row accounting for 20%. If you want to set it separately, you can just write it without the repeat() function.

unit

The units can be px, percentage, or FR auto(which means you decide how long you want), and the FR keyword is handy

Row spacing and column spacing

Grid-row-gap property row spacing

Grid-column-gap Specifies the column interval of the grid-column-gap attribute

Grid-gap abbreviations are separated by Spaces

The designated area

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.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'a e c'
                       'a h i';
}
Copy the code

The code above identifies six regions: A, B, C, E, H, I

If some area is not needed, use “points” (.). Said.

Once grid-template-areas are used, grid-Areas need to be used in conjunction with sub-projects to take effect.

The above code can omit grid-template-columns and grid-template-rows, and it also works.

Areas are very convenient, but you need to add grid-area to the sub-project to correspond to them, which is intuitive and increases the amount of code.

Sets the arrangement of content in subprojects

  • Property-items, which sets the horizontal position of the cell’s contents (left, center, and right)
  • Align-items property to set vertical position of cell contents (top, middle, bottom)
  • The place-items property is a shorthand for the above property

Properties:

  • Start: Aligns the beginning edge of the cell.
  • End: Aligns the end edge of the cell.
  • Center: Cell is internally centered.
  • Stretch: stretches to fill the entire width of a cell (default).

Sets the arrangement of the entire content area

  • Context-content property, the horizontal position of the entire content area inside the container (left, center, and right)
  • Align-content property, the vertical position of the entire content area (top, middle, bottom)
  • Place-content property, short

Properties:

  • Start – Aligns the start border of the container
  • End – Aligns the end border of the container.
  • Center – The container is internally centered.
  • Stretch – When item size is not specified, stretch takes up the entire grid container.
  • Space-around – Equal spacing on both sides of each project. As a result, the space between items is twice as large as the space between items and the container borders.
  • Space-between – Items spaced equally with no spacing between items and container borders.
  • The space- instituted – an item evenly spaced with the item, and an item evenly spaced with the container border.

Setting project Properties

Sets the line from which the project occupies to which line

Sets the occupied bit of the column

grid-column:start / end

It’s short for grid-column-start and grid-column-end starting at 1

Sets the occupation of rows

Grid-row :start/end is short for grid-row-start and grid-row-end starting at 1

Specify which areas the project will be placed in to work with grid-template-areas

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

.item-1 {
  grid-area: e;
}
Copy the code

Put it in the e region

Grid-area property can also be used as a combination of grid-row-start, grid-column-start, grid-row-end, and grid-column-end to specify the location of the project directly

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
Copy the code

Content for individual items

The sequence-self property sets the horizontal position of the cell’s content (left – center right), exactly as the sequence-items property is used, but only for a single item.

The align-self property sets the vertical position (top, middle, bottom) of the cell’s contents, exactly as the align-items property is used for a single item.

Place-self:

< context-self >;

Properties:

  • Start: Aligns the beginning edge of the cell.
  • End: Aligns the end edge of the cell.
  • Center: Cell is internally centered.
  • Stretch: stretches to fill the entire width of a cell (default).

Reference: Ruan Yifeng’s CSS Grid layout tutorial