Learn Grid layout from Ruan Yifeng

The Grid layout

This paper mainly

Grid layouts are actually conceptually divided into two types: containers and projects. Areas that use a grid layout are called containers.

A container is actually a shelf that contains the contents of the entire Grid layout. It contains a number of attributes:

Grid-template-columns and grid-template-rows can be set in six other ways.

Set spacing to grid-row-gap, grid-column-gap, grid-Gap.

Specify the grid-template-Areas attribute for an area.

Specifies the grid-auto-flow property in place order.

Specifies the context-items, align-items, and place-items properties for the location of the cell’s content.

Property-content, align-content, and place-Content properties that specify the location of the entire content area within the container.

Individual cells have fixed positions for filling grid-auto-columns and grid-auto-rows

Grid-template property, grid property.

Inside the container, grid-positioned child elements are called “items”. It contains a number of attributes:

Set the project location properties grid-column-start, grid-column-end, grid-row-start, grid-row-end

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

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

The positioning of the cell’s contents is described by the context-self, align-self, and place-self attributes

introduce

It divides web pages into grids that can be arbitrarily combined to create a variety of layouts. Effects that previously could only be achieved through complex CSS frameworks are now built into browsers.

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. The Grid layout is far more powerful than the Flex layout.

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.

1 the display properties

Display: grid Specifies a grid layout for a container. By default, container elements are block-level elements, but they can also be set to inline elements. display: inline-grid;

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 Grid-template-columns attribute, grid-template-rows attribute

I’ve already set the spacing for the following code. (To be more obvious)

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.

Here is an image of the code I have set up

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
Copy the code

If I set it to only write the first two, not the last one. Write it like this:

display: grid;
grid-template-columns: 100px 100px ;
grid-template-rows: 100px 100px;
Copy the code

The effect would look something like this:

This means that if you just set up a block of content with two rows and two columns through the Grid layout, the extra content will continue to be arranged according to the default arrangement and will not be executed at the width and height set in the code, but at the width and height of its content.

Grid-template-columns and grid-template-rows can also be set in other ways:

1.repeat()

Repeat () takes two arguments, the first being the number of repetitions and the second being the value to be repeated.

display: grid;
grid-template-columns: repeat(3.33.33%);
grid-template-rows: repeat(3.33.33%)
// This is defined as three rows and three columns, with each row and each column occupying one-third of the space.
display: grid;
grid-template-columns: repeat(2, 100px 20px 80px); //2*3 sets of 6 columns
grid-template-rows: repeat(3, 100px); / / 3
// Here's how to display this:
Copy the code

2. Auto – the 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.

display: grid;
grid-template-columns: repeat(auto-fill, 100px);
// Each column is 100px wide and then automatically fills until the container cannot hold any more columns.
Copy the code

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.

display: grid;
grid-template-columns: 1fr 2fr;
Copy the code

It can also be mixed with pixels

display: grid;
grid-template-columns: 150px 1fr 2fr;
// The width of the first column is 150 pixels, and the width of the second column is half that of the third.
Copy the code

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

So when it’s wide enough, it’s always 1FR, the same column width. If the width is insufficient, the third column has a minimum width of 100px.

5. The auto keyword

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

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

The two sides are fixed column widths, and the second column width is the entire GIRD container column width minus one or three columns.

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.

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

The grid layout allows multiple names for the same line, such as [fifth line row-5].

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

  grid-row-gap: 20px;
  grid-column-gap: 20px;
Copy the code

The grid-gap attribute is a combination of grid-column-gap and grid-row-gap

grid-gap: <grid-row-gap> <grid-column-gap>;
grid-gap: 20px 20px;
// If grid-gap omits the second value, the browser considers the second value equal to the first value.
Copy the code

Grid-gap and grid-row-gap are written as column-gap and row-gap, and grid-gap is written as gap.

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.

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';
// The above code first divides the 9 cells and then names them as the 9 regions a through I, which correspond to the 9 cells.

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';
// Divide the 9 cells into a, B, and C areas.
grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';
// If some area is not needed, use "point" (.). Said.
Copy the code

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.

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, the first row is filled before the second row is started. 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 after row”.

This value can also be row dense and Column dense. These two values are mainly used for how the remaining items are automatically placed after certain items are specified. Fill as tightly as possible with as little space as possible.

#container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: row dense;
}
.item-1 {
  background-color: #4ba946;
  grid-column-start: 1;
  grid-column-end: 3;
}

.item-2 {
  background-color: #4ba946;
  grid-column-start: 1;
  grid-column-end: 3;
}
Copy the code

6. Justify -items, align-items, place-items

The justify-items property sets the horizontal position (left, middle and right) of the cell content, and 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

Attribute values:

Start: Aligns the beginning edge of the cell.
End: Aligns the end edge of the cell.
Center: Cell is internally centered.
Stretch: to cover the entire width of a cellThe default value).

justify-items: start; align-items: start ; The effect of:The place-items property is a combination of the align-items and context-items properties.

place-items: <align-items> <justify-items>;
place-items: start end;
// If the second value is omitted, the browser considers it equal to the first value.
Copy the code

7. Justify -content, align-content, place-content

The justify-content attribute is the horizontal (left – middle – right) position of the entire content area in the container, and the align-content attribute 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

Is the following:

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: row;
justify-content: space-between;
// The align-content property is exactly the same except that the horizontal direction is changed to vertical.
Copy the code

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

place-content: <align-content> <justify-content>;
place-content: space-around space-evenly;
// If you omit the second value, the browser assumes that the second value is equal to the first value.
Copy the code

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.

#container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

.item-8 {
  background-color: #4ba946;
  grid-row-start: 4;
  grid-column-start: 2;
}
.item-9 {
  background-color: #4ba946;
  grid-row-start: 5;
  grid-column-start: 3;
}
Copy the code

9. Grid-template attribute, grid attribute

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

Grid attributes are grid-template-rows, grid-template-columns, grid-template-columns, and areas. Grid-auto-rows, grid-auto-columns, and grid-auto-flow are combined abbreviations.

For ease of reading and writing, it is recommended not to merge attributes, so I won’t go into the details here.

The project properties

The following attributes are defined on the project.

1. Grid-column-start, grid-column-end, grid-row-start, grid-row-end

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

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

With the exception of item 1, all items have no location specified and are automatically laid out by the browser, where their location is determined by the container’s Grid-auto-flow property, which defaults to row, so it is arranged “first column after column”.

#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;
}
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

The values of these four attributes can also be used with the SPAN keyword, which means “span”, or how many grids are crossed between the left and right (top and bottom) borders.

.item-1 {
  grid-column-start: span 2;
  // indicates that the left border of item 1 spans 2 grids from the right border.
  grid-column-end: span 2;
  // The same effect as the code above
}
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.

2. Grid-column attribute, grid-row attribute

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

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

The effect!

.item-1 {
  background-color: #4ba946;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
// Or the following, as above
.item-1 {
  background-color: #4ba946;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
Copy the code

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

3. The grid – area property

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

#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";
}
.item-1 {
  background-color: #4ba946;
  grid-area: e;
}
Copy the code

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

4. Justify 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.

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-self attribute is a combination of the align-self and context-self attributes.

place-self: <align-self> <justify-self>;
place-self: center center;
// If the second value is omitted, the place-self attribute assumes that the two values are equal.
Copy the code