1. Introduction

Grid layout is a new layout in CSS that has strong control over the location and size of boxes and box contents. Unlike Flex, which focuses on a single axis, grid ADAPTS to multiple axes, so here’s a brief introduction.

Flex Layout

Grid Layout

2. Basic concepts

Set the display: the grid; Is called a container, and its immediate child elements are called items, but note that descendant elements are not items.

Grid line: a structure that forms a grid layout, either horizontal or vertical.

Grid track: The space between two adjacent grid lines, thought of as a row or a column.

Grid cell: a space consisting of dividing lines between two adjacent rows and columns. It is a cell in the grid layout.

Grid area: the entire space covered by four grid lines. Any number of grid cells form a grid area.

3. Container properties

The grid container has a lot of properties, 18 in all, but many of them can be abbreviated, so don’t get too nervous.

  • The grid – the template series
    • grid-template-columns
    • grid-template-rows
    • grid-template-areas
  • The grid – gap series
    • grid-column-gap
    • grid-row-gap
  • Place – items series
    • justify-items
    • align-items
  • Place – the content series
    • justify-content
    • align-content
  • The grid series
    • grid-auto-columns
    • grid-auto-rows
    • grid-auto-flow

3.1 the grid – the template series

3.1.1 the grid – the template – the columns, the grid – the template – rows

Define the number of rows and columns.

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}
Copy the code

This defines a grid container with three rows and three columns. Grid-template-rows/grid-template-columns receive values auto, fr, px and %.

To introduce FR, it is not difficult to understand, just like Flex: 1.

You can name the grid line so that you can use the corresponding line to set the item. See the item property below for details.

.container { display: grid; width: 500px; height: 500px; grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4]; grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4]; Container {display: grid; container {display: grid; container {display: grid; container {display: grid; width: 500px; height: 500px; grid-template-columns: repeat(3, 1fr column); grid-template-rows: repeat(3, 1fr row); }Copy the code

3.1.2 the grid – the template – areas

Grid template area: through the specified name to the grid area, convenient project properties grid – area access grid area, syntax is as follows: the grid – the template – areas: none | grid – area – the name |. (half Angle period);

None: is the defined grid region;

Grid-area-name: specifies the name of the defined grid area. Grid-area is used as the project attribute. .: Empty grid cell;

.container {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-columns: repeat(3, 1fr column);
  grid-template-rows: repeat(3, 1fr row);
  grid-template-areas:
    "header header header"
    "main . sidebar"
    "footer footer footer";  
}
.container>div {
  border: 1px solid lightcoral;
}
// 项目
.item1 {
  grid-area: header;
}
.item2 {
  grid-area: sidebar;
}
.item3 {
  grid-area: main;
}
.item4 {
  grid-area: footer;
}
// html
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
Copy the code

The final effect is as follows:

Note: When grid-template-areas is used for grid naming, the start and end lines of grid rows and columns are automatically named name-start and name-end, so the same line can have multiple names. For example, header-start, main-start, and footer-start.

.item1 { grid-area: header; Item1 {grid-column-start: header-start; grid-column-end: header-end; }Copy the code

3.1.3 the grid – the template

Finally, this compound property, like background, font, border, etc., is a set of grid-template properties.

First look at the basic syntax: the grid – the template: none | grid – the template – rows/grid – the template – the columns;

None: Resets all properties to their original values;

grid-template-rows / grid-template-columns: Set grid-template-columns and grid-template-rows to the specified values, and set grid-template-areas to None.

Grid-template-area: grid-template-area: grid-template-area: grid-template-area: grid-template-area: grid-template-area: grid-template-area: grid-template-area To be honest, the syntax is a bit complicated, so let’s break it down.

Grid-template: [row1-start]"header header header" 1fr [row1-end]
  [row2-start] "main . sidebar" 1fr [row2-end]
  [row2-start] "footer footer footer"1fr [row2-end] / [column-start] 1fr 1fr 1fr [column-end]; / / -- -- -- -- -- -- -- -- -- -- -- -- -- line -- -- -- -- -- -- -- -- -- -- -- -- -- the item1 {grid - column - start: header - start; grid-column-end: header-end; Item1 {grid-column-start: column-start; grid-column-end: column-end; }Copy the code

3.2 the grid – gap series

This series is relatively simple, is the definition of row and row, column and column gap, directly use grid-gap to introduce.

grid-gap: grid-row-gap grid-column-gap; If you write only one value you have the same space between rows and columns.

Note: In Chrome 68+, Safari 11.2 Release 50+ and Opera 54+, you can remove the grid prefix and only need row-gap, column-gap, and gap.

.containner { // ... Grid-gap: 10px; }Copy the code

To differentiate the layout, use red boxes to highlight the original layout. The space between the dotted lines is the 10px gap. The schematic diagram is as follows:

3.3 Place-Items and Place-Content series

place-items: justify-items align-items;

place-content: justify-content align-content;

The two series are introduced together because they are similar in many ways.

Justify -items: horizontal alignment of grid items. The default is stretch, and other values include start, end, and center.

stretch:

start:

end:

center:

Align-items: The vertical alignment of grid items, which looks like precy-items, but is vertical instead of horizontal.

// The following two attributes require us to adjust the previous CSS code, because the place series requires some special cases (i.e. the grid size of items is smaller than the container). Box {margin: 200px auto; display: grid; width: 500px; height: 500px; grid-template: 100px 100px / 100px 100px; gap: 10px; justify-content: start; border: 1px solid#ccc;
}

.box>div {
  border: 1px solid lightcoral;
}

.item1 {
  grid-column: 1;
  grid-row: 1;
}

.item2 {
  grid-column: 2;
  grid-row: 1;
}

.item3 {
  grid-column: 1;
  grid-row: 2;
}

.item4 {
  grid-column: 2;
  grid-row: 2;
}
Copy the code

Justice-content: Horizontal alignment of the entire grid relative to the container. The default is start, followed by end, Center, Stretch, space-around, space-between, and space-instituted.

start:

end:

center:

Stretch: Same as start in this example.

space-around:

space-between:

space-evenly:

Align-content: this is the opposite of justify-content.

3.4 the grid series

Grid-auto-columns and grid-auto-rows can be used to define the size of our implicit grid beyond the number of grid cells.

.box {
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
}
Copy the code

If a grid-template attribute is not defined, a 100 by 100 px grid will be generated based on item.

.item4 {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
Copy the code

If there is one such item definition that exceeds the number of grids, then the size of the item is 100 * 100 px as grid-Auto. Only grid-auto-columns can adjust the width of the automatically created item, but not its height.

Grid-auto-flow: Defines the spin direction of an item, for example.

// html
<div class="box">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

// css
.box {
  margin: 200px auto;
  display: grid;
  width: 500px;
  height: 500px;
  grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr;
  grid-auto-flow: row;
  gap: 10px;
  justify-content: start;
}

.box>div {
  border: 1px solid lightcoral;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 1;
}

.item4 {
  grid-column: 1 / 3;
  grid-row: 4;
}
Copy the code

Row:

Column:

Gird: Is an abbreviation of the following attributes — grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, And the grid – auto – flow. Note, however, that you can only declare display attributes or implicit attributes at the same time.

/** */ grid: auto-flow / 1fr 1fr 1fr; // Equivalent to grid-auto-flow: row; grid-template-columns: 1fr 1fr 1fr; grid: auto-flow dense 100px / 1fr 1fr 1fr; // Grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 1fr 1fr; /** * display attributes **/ gird: 1fr 1fr 1fr / 1fr 1fr 1fr; // Equivalent to grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; /** * complex attributes **/ grid: [row1-start]"header header header" 1fr [row1-end]
      [row2-start] "main . sidebar" 1fr [row2-end]
      [row3-start] "footer footer footer"1fr [row3-end] / 1fr 1fr 1fr; // Equivalent to grid-template-areas:"header header header"
  "footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 1fr [row2-end row3-start] 1fr [row3-end];
grid-template-columns: 1fr 1fr 1fr;
Copy the code

4. Project attributes

One caveat here is that flaot, display (except inline-table, contents, table), vertical-align, and column-* do not apply to grid Item items.

4.1 the grid – the column, the grid – row

Grid-column-start, grid-column-end, grid-row-start and grid-row-end are used to determine the position of the item.

The value of the attribute: number | lineName | span < number > | span < lineName > | auto

The value of the attribute is introduced using 9 cells as an example.

Number: 1, 2, 3, 4 from left to right and top to bottom.

LineName: The name of the separator line defined on the container.

Span < number > | span < lineName > : the number of span and across to one of the separation line.

Auto: Automatic span or one span by default.

// number. Item {grid-column: 3/4; grid-row: 2 / 3; } // lineName .container { // ... grid-template-columns: [column-1] 1fr [column-2] 1fr [column-3] 1fr [column-4]; grid-template-rows: [row-1] 1fr [row-2] 1fr [row-3] 1fr [row-4]; } .item { grid-column:column-3 / column-4; grid-row: row-2 / row-3; } // span <number> | span <name> .item { grid-column:column-3 / span 1; grid-row: row-2 / span row-3; }Copy the code

4.2 the grid – area

The item location is set by the name of the container grid-template-areas Settings, which can also be used as an abbreviation for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

.container {
  // ...
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "main . sidebar" 1fr [row2-end]
        [row3-start] "footer footer footer"1fr [row3-end] / 1fr 1fr 1fr; } .item-1 { grid-area: header; {grid-area: row1-start / 1 / row1-end / 4; }Copy the code

4.3 place – self

With the justify – self, align – self two attributes: the inline (row/column) axis aligned in a cell of the grid, the main values are: start | | end center | stretch.

place-self: align-self justify-self;

.item-1 {
  place-self: center stretch;
}
Copy the code

5. Add

Explicit grid: Columns and rows of a grid that are explicitly set using grid-template-columns and grid-template-rows properties.

Implicit grid: grid-auto-flow Default flow. Grid-auto-flow can change the default flow direction row to column.