An overview,

Grid layout, also known as Grid layout, is a two-dimensional layout method. It is a frame layout structure formed by two groups of intersecting Grid lines, which can process rows and columns at the same time

Good at dividing a page into major areas and defining their size, location, hierarchy, etc

This is different from the flex one-dimensional layout discussed earlier

Set the display:grid/inline-grid element to be the grid layout container, so that the grid layout algorithm of the browser rendering engine can be launched

<div class="container">
    <div class="item item-1">
        <p class="sub-item"></p >
 </div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div> 
Copy the code

In the code example above, the.container element is the grid layout container and the.item element is the grid item. Since the grid element can only be the top child of the container, the P element is not a grid element

The grid-line concept is mentioned here to help you understand grid-column properties

Grid lines, the lines that divide the grid, are shown below:

The figure above shows a 2 x 3 grid with 3 horizontal grids and 4 vertical grids

Second, properties,

Similarly, Grid layout attributes fall into two broad categories:

  • Container properties,
  • The project properties

The container properties are as follows:

The display properties

At the beginning of this article, you create a grid container by setting display: grid or display: inline-grid on the element

  • Display: grid is a block-level element

  • Display: inline-grid The container element is an inline element

Grid-template-columns attribute, grid-template-rows attribute

The grid-template-columns property sets the column width and the grid-template-rows property sets the row height

.wrapper {
  display: grid;
  /* Declare three columns with width 200px 200px 200px */
  grid-template-columns: 200px 200px 200px;
  grid-gap: 5px;
  /* Declare two lines, each 50px 50px */
  grid-template-rows: 50px 50px;
}
Copy the code

The above indicates that the fixed column width is 200px, 200px, 200px and the row height is 50px, 50px

You can see in the code above that the width and height of the repeated write cells can be shortened by using the repeat() function

  • The first parameter is the number of repetitions
  • The second argument is a duplicate value

So the above code can be abbreviated as

.wrapper {
  display: grid;
  grid-template-columns: repeat(3.200px);
  grid-gap: 5px;
  grid-template-rows:repeat(2.50px);
}
Copy the code

In addition to the repeact keyword above, there are:

  • Auto-fill: indicates auto-fill, so that a row (or column) contains as many cells as possible

Grid-template-columns: repeat(auto-fill, 200px) indicates that the column width is 200px, but the number of columns is not fixed. You can place elements as long as the browser can fit them

  • Fr: fragment, for ease of representation of proportional relations

Grid-template-columns: 200px 1fr 2fr Indicates that the width of the first column is 200px, and the remaining width is 1/3 and 2/3 of the remaining width respectively

  • Minmax: Generates a length range within which the length can be applied to a grid project. The first parameter is the minimum and the second parameter is the maximum

Minmax (100px, 1fr) indicates that the column width is not less than 100px but not more than 1fr

  • Auto: The length is determined by the browser

Grid-template-columns: 100px auto 100px indicates the first and third columns of 100px. The length of the middle columns is determined by the browser

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

The grid-row-gap and grid-column-gap attributes set the row spacing and column spacing respectively. The grid-gap attribute is a shorthand for both

Grid-row-gap: 10px indicates that the row spacing is 10px

Grid-column-gap: 20px indicates column spacing is 20px

Grid-gap: 10px 20px equals the above two attributes

The grid – the template – areas attribute

Used to define a region. A region consists of one or more cells

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

The code above divides nine cells and then names them as nine regions a through I, which correspond to each of the nine cells.

Multiple cells combined into a region are written as follows

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
Copy the code

The above code divides the nine cells into three areas: A, B, and C

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

The grid – auto – flow properties

After the grid is divided, the children of the container are automatically placed in each grid, in order.

The order is determined by grid-auto-flow. The default is row, which means “first row, second row”

When changed to column, the placement becomes the following:

Context-items, align-items, place-items

The context-items property sets the horizontal position of the cell’s content (left, middle, and right), and the align-items property sets the vertical position of the cell (top, middle, and bottom)

The values of both properties complete the same

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}
Copy the code

The attributes correspond to the following:

  • 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)

The place-items property is a combination of the align-items and context-items properties

Context-content, align-content, place-content

The justify-content property is the horizontal (left – middle – right) position of the entire content area in the container, and the align-content property is the vertical (top – middle – bottom) position of the entire content area

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;  
}
Copy the code

Both attributes are written exactly the same and can take the following values:

  • Start – Aligns the start border of the container
  • End – Aligns the end border of the container
  • Center – The container is internally centered

  • 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

  • Stretch – When item size is not specified, stretch takes up the entire grid container

Grid-auto-columns and grid-auto-rows properties

Sometimes, the specified location of some items, outside of the existing grid, produces a display grid and an implicit grid

For example, the grid has only three columns, but an item is specified on row 5. At this point, the browser automatically generates an extra grid to place the project. The excess is the implicit grid

Grid-auto-rows and grid-auto-columns are specifically used to specify the width and height of implicit grids

The project attributes are as follows:

Grid-column-start, grid-column-end, grid-row-start, and grid-row-end attributes

Specify which grid line is located on the four borders of the grid project, and thus the location of the project

  • Grid-column-start property: vertical gridline on which the left border is located
  • Grid-column-end property: vertical gridline with the right border
  • Grid-row-start property: the horizontal grid line on which the top border is located
  • Grid-row-end property: horizontal gridline on which the bottom border is located

Here’s an example:

<style>
    #container{
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .item-1 {
        grid-column-start: 2;
        grid-column-end: 4;
    }
</style>

<div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>
Copy the code

Specify that the left border of item 1 is the second vertical grid line and the right border is the fourth vertical grid line by setting the grid-column property

The grid – area property

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

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

Put project 1 in zone E

Use with grid-template-areas mentioned above

Context-self, align-self, and place-self

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

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}
Copy the code

Either of these attributes can take on the following four values.

  • 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)

Three, application scenarios

The Grid layout is a powerful layout, such as some common CSS layouts, such as center, two column layout, three column layout and so on are easy to implement, in the previous article, there are also Grid layout to complete the corresponding function

For compatibility issues, the results are as follows:

Overall compatibility is good, but not supported under IE 10

At present, Grid layout support on mobile is not very friendly