The Grid layout

A Grid layout introduction

The Grid is the most powerful CSS layout scheme

It divides web pages into grids that can be arbitrarily combined to create a variety of layouts.

A Grid layout is similar to a Flex layout in that it can specify the location of multiple items within a container. But there are important differences.

  • Flex layout is an axis layout and can only specify the position of “items” against the axis, which can be considered as a one-dimensional layout.
  • A Grid layout divides the container into “rows” and “columns “, generates cells, and then specifies the cells” where the project resides “, which can be thought of as a two-dimensional layout

Before you learn about Grid layout, you’ll cover a few basic concepts, first containers and projects, then rows and columns, then cells, and finally Grid lines. These concepts are relatively simple and won’t be described here.

2. Container Properties

2.1 Display: grid/inline-grid property

The first property sets the container layout to grid, which is set by display: grid. By default, container elements are block-level elements with grid values set, but container elements can also be set to inline elements by setting display: inline-grid

Note: * With grid layout, float, display: inline-block, display: table-cell, vertical-align and column- Settings for container child elements (items) are invalidated

2.2 the grid – the template – the columns/grid – the template – rows

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

The grid-template-columns attribute defines the column width of each column,

The grid-template-rows attribute defines the row height for each row

Note: The border of each cell is included in these two attributes

Introduction to Attribute Values

  • Start with absolute units such as 50px, or use percentage units such as 33.33%(note that the percentage is relative to the grid container)

  • The repeat() function, which takes two arguments, the first the number of repetitions and the second the value to be repeated, so you can use this function to avoid writing the same value over and over again

    Alternatively, the repeat() function can repeat a pattern, in which case it can take multiple arguments. Again, the first argument is the number of repetitions and the following argument is the pattern argument

  • Auto-fill keyword. Sometimes, the cell size is fixed, but the container size is uncertain. If you want each row (or column) to contain as many cells as possible, you can use the auto-fill keyword to indicate auto-fill

  • The fr keyword. To facilitate the representation of proportional relationships, the grid layout provides the FR keyword (abbreviation for fraction, meaning “fragment “). If the columns are 1fr and 2FR wide, the latter is twice as large as the former; In addition, the FR keyword can be used in conjunction with units of absolute length, which is very handy

  • The minmax() function produces a length range that indicates that the length is within that range. It takes two parameters, a minimum and a maximum.

    Grid-template-columns: 1fr 1fr minmax(100px, 1fr) Grid-template-columns: 1fr 1fr Minmax (100px, 1fr)

  • The auto keyword indicates that the length is determined by the browser

    Grid-template-columns: 100px auto 100px The width of the second column is basically equal to

  • Grid-template-columns and grid-template-rows can also use square brackets to specify the name of each grid line for future reference

The code above specifies that the grid layout is 3 rows x3 columns, so there are 4 horizontal grid lines. Inside square brackets are the names of the eight wires.

Grid layouts allow multiple names for the same line, such as [fifth line row-5]

Layout instance

The grid-template-columns attribute is useful for web page layouts

  • Two column layout
  • Twelve grid layout

2.3 the grid – row – gap/grid – column – gap/grid – gap properties

Grid-column-gap property sets the spacing between columns (column spacing)

Grid-row-gap property sets row to row spacing (row spacing)

The grid-gap attribute is a shorthand for the above two attributes

grid-gap:

If grid-gap omits the second value, the browser considers the second value equal to the first

Generally, these three attributes are absolute pixels

Grid-column-gap and grid-row-gap can be written as column-gap and row-gap. Grid-column-gap and grid-row-gap can be written as column-gap and row-gap.

The grid – gap gap

2.4 the grid – the template – areas

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

Note that the name of the region affects the grid lines. The start grid line for each region is automatically named -start and the end grid line is automatically named -end

The following is a common example of how this property is used

  • The code above is divided into nine cells and then named nine regions a through I for each of the nine cells

  • The combination of cells into a region

    The code above divides the 9 regions into regions A, B, and C

  • If some area is not needed, ‘dot (.)’ is used. ‘said

    In the code above, a dot in the middle column indicates that the cell is not used or does not belong to any region

  • Examples of common layouts

    In the code above, the header area is at the top, the footer area is at the bottom, and the main and aside area is in the middle, along with a cell that won’t be used

3.5 the grid – auto – flow

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

The default placement order seems to be “first column after column “, i.e. the first row is filled before the second row is started, as shown in the following figure.

This order is determined by the grid-auto-flow property, which controls how the automatic layout algorithm works, specifying exactly how the elements that are automatically laid out in the grid are arranged.

  • Row (default) is “first column after column”
  • “Column” becomes “column before row”
  • Dense The keyword dense specifies that the automatic layout algorithm uses a “dense” stacking algorithm, that is, it tries to fill in the gaps left in the grid (which can fill in the gaps left by larger elements, but also disrupt the order in which they were present)
  • Row dense prioritizes the use of dense packing algorithms on rows
  • Column dense prioritizes the use of dense stacking algorithms on columns

3.6 context-items /align-items/place-items

The context-items property sets the horizontal position of the cell’s content (left, center, and right)

The align-items property sets the vertical position of the cell’s contents (top, middle, bottom)

The place-items property is a combined short form of the two properties above:

Note: If the second value is omitted, the browser considers it equal to the first value

The property value of the property above

  • Start aligns the beginning edge of the cell
  • End aligns the end edge of the cell
  • The Center cell is internally centered
  • Stretch to fill the entire width of a cell (default)

3.7 the justify – the content/align – the content/place – the content

The precision-content attribute is the horizontal position of the entire content area inside the container (left, middle and right)

The align-content property is the vertical position of the entire content area (top, middle, bottom)

The place-content attribute is the combined shorthand of the two attributes above:

Values of the above attributes:

  • Start Aligns the start border of the container (default)
  • End aligns the end border of the container
  • Center The container is centered inside
  • When the size of the Stretch project is not specified, the stretch takes up the entire grid container
  • Space-around Each project has equal spacing on both sides. Therefore, the space between items is twice as large as the space between items and the container borders
  • Space-between items are spaced equally between items, with no spacing between items and container borders
  • The space- instituted project is evenly spaced with projects, and the project is evenly spaced with the container border

3.8 the grid – auto – columns/grid – auto – rows

Scenario: Specifies the location of some items, outside of the existing grid. For example, the grid has only 3 rows, but an item is specified on line 5. At this point, the browser automatically generates an extra grid to place the project.

The grid-auto-columns and grid-auto-rows properties set the column width and row height of the extra grid automatically created by the browser.

Their syntax is identical to grid-template-columns/grid-template-rows

If these two attributes are not specified, the browser determines the column width and row height of the new grid solely based on the size of the cell content

3.9 the grid – the template/grid

The grid-template attribute is a combination of grid-template-rows, grid-template-columns, and grid-template-areas

Grid attributes are grid-template-rows, grid-template-columns, grid-template-columns, grid-auto-rows, and areas. Grid-auto-columns A combined short form of the six attributes grid-auto-flow.

In real development, the use of merge attributes is not recommended.

3. Description of items properties

3.1 the grid – column – start/grid – column – end the grid – row – start/grid – row – end

In a Container, the location of items can be specified by specifying which grid line the four borders of the item are located on

  • Grid-column-start: The vertical grid line with the left border
  • Grid-column-end: the vertical grid line with the border
  • Grid-row-start: horizontal grid line with the top border
  • Grid-row-end: the horizontal grid line with the bottom border

Note that the attribute values for these attributes are usually stated as numbers, but can also be specified as grid line names (this is usually used in conjunction with the grid-template-areas attribute).

In addition, the values of these four attributes can use the span keyword to indicate the span, that is, how many grids are crossed between the left and right (top and bottom) borders

In addition, using these four attributes, if an overlap of items occurs, you can specify the order in which the items overlap using the Z-index attribute

The code above specifies that the left border of project 1 is the second vertical grid line and the right border is the fourth vertical grid line. In addition, only the left and right borders of project 1 are specified, and the upper and lower borders are not specified. Therefore, the default position of the upper and lower borders is the first horizontal grid line, and the lower border is the second horizontal grid line.

In addition, with the exception of item number one, all items are not located and are automatically laid out by the browser, where their location is determined by the container’s Grid-auto-flow property

The following example is an example of specifying four border positions for Item-1

The code here has the same effect as grid-Column-end: span 2

3.2 the grid – the column/grid – row

The grid-column attribute is a combination of the grid-column-start and grid-column-end attributes above

The grid-row attribute is a combination of the grid-row-start and grid-row-end attributes above

grid-column: /

grid-row: /

You can also use the span keyword to indicate how many grids to span

The slash and the following part can be omitted and by default spans a grid

3.3 the grid – area

The grid-area attribute specifies which areas the project will be placed in, and is usually used in combination with grid-template-areas

Grid-area attributes can also be used to specify the location of an item using the combined shorthand grid-row-start, grid-column-start, grid-row-end, and grid-column-end

3.4 the justify – self/align – self/place – self

The precision-self property sets the horizontal position of the cell’s content (left-center right), exactly as the precision-items property is used, but scoped only to individual items

The align-self property sets the vertical distance (top, middle, bottom) of the cell’s contents, exactly the same as the align-items property, which applies only to a single item

The place-self attribute is the combined shorthand of the two attributes above: