This is the third day of my participation in the August Text Challenge.More challenges in August

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.

What was once only possible with complex CSS frameworks is now finally built into browsers.

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. Grid layouts are far more powerful than Flex layouts.

1. Basic Concepts

1.1 Containers and Items

Areas that use a grid layout are called containers. Inside the container, grid-positioned child elements are called “items”.

<div> 
    <div><p>1</p></div> 
    <div><p>2</p></div> 
    <div><p>3</p></div> 
</div> 
Copy the code

In the code above, the outermost

element is the container, and the three

elements in the inner layer are the items.

Note: An item can only be a top-level child of a container, not a child of the item. For example, the

element in the code above is not an item. Grid layout only works for items.

1.2 rows and columns

The horizontal areas inside the container are called rows, and the vertical areas are called columns.

1.3 cell

The area where rows and columns intersect is called a cell. Normally, n rows and m columns produce n x m cells. For example, 3 rows and 3 columns produce 9 cells.

1.4 the grid line

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. Normally, row N has N + 1 horizontal grid lines and column M has M + 1 vertical grid lines, for example, row 3 has four horizontal grid lines.

Container properties

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. This section starts with container properties.

2.1 the display properties

Display: grid Specifies a grid layout for a container.

div { 
    display: grid; 
} 
Copy the code

By default, container elements are block-level elements, but they can also be set to inline elements.

div { 
    display: inline-grid; 
} 
Copy the code

The code above specifies that div is an inline element with a grid layout inside.

Note that the grid layout invalidates float, display: inline-block, display: table-cell, vertical-align, and column-* Settings for the container’s child elements (items).

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

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, and the grid-template-rows attribute defines the row height of each row.

.container { 
    display: grid; 
    grid-template-columns: 100px 100px 100px; 
    grid-template-rows: 100px 100px 100px; 
} 
Copy the code

The code above specifies a grid with three rows and three columns, each 100px wide and row height.

In addition to using absolute units, you can also use percentages.

.container { 
    display: grid; 
    grid-template-columns: 33.33% 33.33% 33.33%; 
    grid-template-rows: 33.33% 33.33% 33.33%; 
} 
Copy the code

(1) repeat ()

Sometimes, it can be cumbersome to write the same values repeatedly, especially if there are many grids. In this case, you can use the repeat() function to simplify repeating values. The code above is rewritten with repeat() as follows.

.container { 
    display: grid; 
    grid-template-columns: repeat(3.33.33%); 
    grid-template-rows: repeat(3.33.33%); 
} 
Copy the code

Repeat () takes two arguments, the first being the number of repetitions (3 in the previous example) and the second being the value to be repeated. It is also ok to repeat() a pattern.

grid-template-columns: repeat(2.100px 20px 80px); 
Copy the code

The code above defines six columns, with the first and fourth columns 100px wide, the second and fifth columns 20px, and the third and sixth columns 80px wide.

(2) 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.

.container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, 100px); 
} 
Copy the code

The code above shows that each column is 100px wide and then automatically fills it until the container can’t fit any more columns.

(3) FR keyword

The grid layout provides the FR keyword (short for fraction, meaning “fragment”) to facilitate the representation of proportional relationships. If the columns are 1fr and 2FR wide, the latter is twice as large as the former.

.container { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
} 
Copy the code

The code above represents two columns of the same width.

Fr can be used in conjunction with units of absolute length, which is handy.

.container { 
    display: grid; 
    grid-template-columns: 150px 1fr 2fr; 
} 
Copy the code

The code above shows that the width of the first column is 150px and the width of the second column is half that of the third column.

(4) the minmax ()

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); 
Copy the code

In the code above, minmax(100px, 1fr) means that the column width is not less than 100px, but not more than 1fr.

(5) Auto keyword

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

grid-template-columns: 100px auto 100px; 
Copy the code

In the code above, the width of column 2 is essentially equal to the maximum cell width of that column, unless the cell content is set to min-width and this value is greater than the maximum width.

(6) Name of grid line

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

.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

The code above specifies a grid layout of 3 rows x 3 columns, so there are 4 vertical grid lines and 4 horizontal grid lines. Inside square brackets are the names of the eight lines. The grid layout allows multiple names for the same line, such as [fifth line row-5].

(7) Layout examples

The grid-template-columns attribute is useful for web page layouts. A two-column layout requires only one line of code.

.wrapper { 
    display: grid; 
    grid-template-columns: 70% 30%; 
} 
Copy the code

The code above sets the left column to 70% and the right column to 30%. The traditional 12-grid layout is also easy to write.

grid-template-columns: repeat(12.1fr); 
Copy the code

2.3 Grid-row-gap attribute, grid-column-gap attribute, grid-gap attribute

Grid-row-gap sets the spacing between rows (row spacing), and grid-column-gap sets the spacing between columns (column spacing).

.container { 
    grid-row-gap: 20px; 
    grid-column-gap: 20px; 
} 
Copy the code

Grid-gap is a combination of grid-column-gap and grid-row-gap. The syntax is as follows.

grid-gap: <grid-row-gap> <grid-column-gap>; 
Copy the code

Therefore, the CSS code above is equivalent to the code below.

.container { 
    grid-gap: 20px 20px; 
} 
Copy the code

If grid-gap omits the second value, the browser considers the second value equal to the first. Grid-gap and grid-row-gap are written as column-gap and row-gap, and grid-gap is written as gap.

2.4 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' 
    '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 these 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. Here is an example layout.

grid-template-areas: "header header header" 
"main main sidebar" 
"footer footer footer"; 
Copy the code

In the code above, the header area is at the top, the footer area is at the bottom, and main and sidebar are in the middle. If an area is not needed, use dot.. To indicate the area.

Grid-template-areas: 'A. c' 'D. F' 'G. I';Copy the code

In the code above, a dot in the middle column indicates that the cell is not used or does not belong to any region. 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. For example, if the region name is header, the horizontal and vertical grid lines at the start position are called header-start, and the horizontal and vertical grid lines at the end position are called header-end.

2.5 the grid – auto – flow properties

After the grid is divided, the children of the container are automatically placed in each grid, in order. The default placement order is “first column after column”, that is, row 1 is filled before row 2 is started, as shown in the following figure.

The order is determined by the grid-auto-flow property, and the default value is row, which is “first before column”. Or you can set it to column, which is “column first, row last.”

grid-auto-flow: column; 
Copy the code

The following example makes project 1 and project 2 occupy two cells each, and then uses the default grid-Auto-flow: ROW

In the figure above, the space behind item 1 is empty because item 3 follows item 2 by default, so it will be placed behind item 2.

The Grid-Auto-flow property can be set to Row and column as well as Row dense and Column dense. These two values are mainly used for how the remaining items are automatically placed after certain items are specified. Now modify the Settings to Row dense, which means “first and then” and fill as tightly as possible with as little space as possible.

grid-auto-flow: row dense; 
Copy the code

The figure above fills the first row and then the second row, so item 3 is immediately following item 1. Items 8 and 9 will be in the fourth row. If you change the setting to column dense, it means “column first and then row” and fills as many Spaces as possible.

grid-auto-flow: column dense; 
Copy the code

The figure above will fill column 1 and then column 2, so item 3 is in column 1 and item 4 is in column 2. Projects 8 and 9 have been pushed into the fourth column.

2.6 Context-items, align-items, and place-items

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

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

Both properties are written exactly the same, and can take the following values.

  • start: Aligns the beginning edge of the cell.
  • end: Aligns the end edge of the cell.
  • center: Cells are internally centered.
  • stretch: Stretch to fill the entire width of the cell (default).
.container { 
    justify-items: start; 
} 
Copy the code
.container { 
    align-items: start; 
} 
Copy the code

The above code shows that the content header of the cell is aligned as shown below.

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

place-items: <align-items> <justify-items>; 
Copy the code

Here’s an example.

place-items: start end; 
Copy the code

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

2.7 context-content, align-content, place-content

The property-content property is the horizontal (left, middle, and right) position of the entire content area in the container. The align-content property is the vertical (top, middle, and 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 properties are written exactly the same, and can take the following values. (The following diagrams all use the justify-content property as an example; the align-content property is exactly the same, except that the horizontal direction is changed to vertical.)

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

The place-content attribute is a combination of the align-content and context-content attributes.

place-content: <align-content> <justify-content> 
Copy the code

Here’s an example.

place-content: space-around space-evenly; 
Copy the code

If you omit the second value, the browser assumes that the second value is equal to the first value.

2.8 Grid-auto-columns attribute, grid-auto-rows attribute

Sometimes, some items are assigned locations outside of the existing 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 grid-auto-columns and grid-auto-rows properties set the column width and row height of the extra grid automatically created by the browser. They are written exactly the same as grid-template-columns and 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. In the example below, the grid is 3 rows x 3 columns, but item 8 is specified on row 4 and item 9 on row 5.

.container { 
    display: grid; 
    grid-template-columns: 100px 100px 100px; 
    grid-template-rows: 100px 100px 100px; 
    grid-auto-rows: 50px; 
} 
Copy the code

The code above specifies that the new line height should be 50px (the original line height was 100px).

2.9 Grid-template property, Grid property

The grid-template attribute is a combination of grid-template-columns, grid-template-rows, and grid-template-areas. The grid attributes are grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow The combined short form of these six properties. For readability reasons, it is recommended not to merge attributes, which are not covered in detail here.

3. Project attributes

The following attributes are defined on the item.

3.1 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
.item-1 { 
    grid-column-start: 2; 
    grid-column-end: 4; 
} 
Copy the code

The code above specifies that the left border of item 1 is the second vertical grid line and the right border is the fourth vertical grid line.

In the figure above, only the left and right borders of project 1 are specified, and no upper and lower borders are specified, so the default position will be adopted, that is, the upper border is the first horizontal grid line, and the lower border is the second horizontal grid line. Except for item 1. The rest of the items are laid out automatically by the browser without a location, and their location is determined by the container’s Grid-auto-flow property, which defaults to Row, so it is arranged “first column after column”. You can change the value of this property to Column, Row Dense, and Column Dense, respectively, to see how the position of the other items has changed. The following example is the effect of specifying four border positions.

.item-1 { 
	grid-column-start: 1; 
	grid-column-end: 3; 
	grid-row-start: 2; 
	grid-row-end: 4; 
} 
Copy the code

The values of these four attributes can be specified as the name of the grid line in addition to the number of grid lines.

.item-1 { 
	grid-column-start: header-start; 
	grid-column-end: header-end; 
} 
Copy the code

In the code above, the position of the left border and the right border are specified as the name of the grid line. The values of these four attributes can also be used with the SPAN keyword to indicate “span,” which is how many grids are crossed between the left and right (top and bottom) borders.

.item-1 { 
    grid-column-start: span 2; 
} 
Copy the code

The code above shows that the left border of project 1 spans 2 grids from the right border.

This is exactly the same as the code below.

.item-1 { 
    grid-column-end: span 2; 
} 
Copy the code

Using these four attributes, if an overlap of items occurs, the z-index attribute specifies the order in which the items are overlapped.

3.2 Grid-column attribute, grid-row attribute

Grid-column property is a combination of grid-column-start and grid-column-end. Grid-row is a combination of grid-row-start and grid-row-end.

.item { 
    grid-column: / ; 
    grid-row: / ; 
} 
Copy the code

Here’s an example.

.item-1 { 
    grid-column: 1 / 3; 
    grid-row: 1 / 2; 
} 
Copy the code

Is equivalent to

.item-1 { 
    grid-column-start: 1; 
    grid-column-end: 3; 
    grid-row-start: 1; 
    grid-row-end: 2; 
} 
Copy the code

In the code above, item item-1 occupies the first line, from the first to the third line. You can also use the SPAN keyword between these two properties to indicate how many grids to span.

.item-1 { 
    background: #b03532; 
    grid-column: 1 / 3; 
    grid-row: 1 / 3; 
} 
Copy the code

Is equivalent to

.item-1 { 
    background: #b03532; 
    grid-column: 1 / span 2; 
    grid-row: 1 / span 2; 
} 
Copy the code

In the code above, the area occupied by item item-1 includes row 1 + row 2 and column 1 + column 2.

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

.item-1 { 
    grid-column: 1; 
    grid-row: 1; 
} 
Copy the code

In the code above, item 1 occupies the first upper-left grid.

3.3 the grid – area property

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

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

In the code above, project 1 is located in area E, as shown below.

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

Here’s an example.

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

3.4 Context-self, align-self, 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: Cells are internally centered.
  • stretch: Stretch to fill the entire width of the cell (default).

Here is an example of illustration-self: start.

.item-1 { 
    justify-self: start; 
} 
Copy the code

The place-self attribute is a combination of the align-self and context-self attributes.

place-self: <align-self> <justify-self>; 
Copy the code

Here’s an example.

place-self: center center; 
Copy the code

If the second value is omitted, the place-self attribute assumes that the two values are equal.