CSS Grid layout, is a two-dimensional Grid based layout system, the purpose is to optimize the user interface design. However, the Grid layout is currently not supported by any browser by default, but fortunately you can enable it by setting special flags for Chrome, Opera, or Firefox. In Chrome or Opera, enter Chrome ://flags (Opera ://flags) in the address bar and set the experimental Web Platform features option to enable; In Firefox, make the layout.css.grid.enabled option available. Compatibility: Grid layout compatibility note! Attention! The big news is that most browsers will start supporting Grid layouts by default around March 2017, so it’s worth learning Grid layouts now. Grid layout there are a lot of information on the web about Grid layout, this article is just to record the Grid layout related attributes and usage, in case someone else’s website crashes one day. We use the display property to define a grid container whose grid value determines whether the container is rendered block-level or inline. Once the grid container is enabled, all of its child elements go into the Grid document flow, called grid child items.

Display: the grid | inline - grid | subgrid duplicate codeCopy the code
  • grid: Defines a block-level grid container
  • inline-grid: Defines an inline grid container
  • subgrid: Defines a grid container that inherits the size of the rows and columns of its parent, which is a child of the parent.

Note: Column, float, clear, and vertical-align have no effect on grid containers.

Introduction to simple terms:

Each block represents a grid subitem (grid cell), and four (any number) grid subitems form the grid region.

2. Grid container properties

2.1 the grid – the template – the columns/grid – the template – rows

Lexical:

grid-template-columns: <track-size> ... | <line-name> <track-size> ... ; grid-template-rows: <track-size> ... | <line-name> <track-size> ... ; Copy the codeCopy the code
  • <track-size>: Defines the width and height of a grid cell. The unit can be a length (e.g. Px, EM, REM, vw, vh) or percentage, or the number of units of free space in the grid (in fr).
  • <line-name>: Defines the name of the gridline. It is not a required value. Can be any name you choose, its name is represented by a number when no Settings are displayed.

Example: Grid lines are automatically named with numbers when you leave Spaces between trace values:

.container{ grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } Duplicate codeCopy the code



Of course, we can also give the grid line a name:

.container{ grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; } Duplicate codeCopy the code



Note: Grid lines must be named with brackets

A grid line can also have multiple names, separated by Spaces and enclosed by brackets:

.container{ grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; } Duplicate codeCopy the code

If you define a repeating part of the container, you can use the repeat() method to generate multiple identical values:

.container{ grid-template-columns: repeat(3, 20px [col-start]) 5%; Container {grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 20px [col-start] 5%; } Duplicate codeCopy the code

Special units: FR fr units allow you to set the free space in a grid container to one copy:

.container{ grid-template-columns: 1fr 1fr 1fr; } Duplicate codeCopy the code

In the code above, set each child of the grid container to one-third. Note: Free space is computed after the fixed subterm is determined

.container{ grid-template-columns: 1fr 50px 1fr 1fr; } Duplicate codeCopy the code

In the code above, the free space is the sum of fr units but not 50px. Grid-template-areas can be used with grid-Areas to define an explicit grid area. Grid-template-areas define grid areas, and then use grid-area to call the declared grid area name to place the corresponding grid project.

Lexical:

grid-template-areas: "<grid-area-name> | . | none | ..." "..." Copy the codeCopy the code
  • <grid-area-name>In:grid-areaThe name of the grid region specified in
  • .: A period represents an empty grid cell
  • none: No grid region is defined

Example:

<div class="container"> <div class="item-a"></div> <div class="item-b"></div> <div class="item-c"></div> <div Class ="item-d"></div> </div> Copy codeCopy the code

Set CSS styles:

.item-a{ grid-area: header; } .item-b{ grid-area: main; } .item-c{ grid-area: sidebar; } .item-d{ grid-area: footer; } .container{ width: 300px; height:200px; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-template-areas: "header header header header" "main main . sidebar" "header footer header footer"; } Duplicate codeCopy the code

In the code above, we will create a 4 by 3 grid container, with the first line consisting of the header area, the middle line consisting of two main areas and an empty cell and a sidebar area, and the last line consisting of the footer area.

2.3 Grid-column-gap /grid-row-gap/grid-gap Specifies the size of grid lines, or the spacing between grid items. Lexical:

Grid-column-gap: <line-size>grid-row-gap: <line-size> Copy codeCopy the code
  • <line-size>: the length value

Grid-gap is short for grid-column-gap and grid-row-gap:

Grid-gap: <grid-column-gap> <grid-row-gap> Copy codeCopy the code

If there is only one value, grid-row-gap will have the same value as grid-column-gap. Example:

.container{ display:grid; grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; grid-column-gap: 10px; grid-row-gap: 15px; } Duplicate codeCopy the code

Note: Spacing only works between grid items, not at container edges.

Align-items aligns the contents of grid items with the column axis (align-items, in contrast, align with the row axis). This value is useful for all grid items in the container.

The justify - items: start | | end center | stretch to copy codeCopy the code
  • startAlign content to the left of the grid area
  • endAlign content to the right of the grid area
  • center: Middle alignment of content and grid area
  • stretch: Width to fill the entire grid area (default)



align-items

Aligns the contents of grid subitems with the row axis. This value is useful for all grid subitems in the container.

align-items: start | end | center | stretch; Copy the codeCopy the code
  • startAlign the content with the top of the grid area
  • end: Align the content with the bottom of the grid area
  • center: Middle alignment of content and grid area
  • stretch: Height to fill the entire grid area (default)

When defined in inelastic units such as PX, the total grid area may be smaller than the grid container, you can set the grid alignment (aligned perpendicular to the column line).

justify-content: start | end | center | stretch | space-around | space-between | space-evenly ; Copy the codeCopy the code
  • startAlignment: left
  • end: the right alignment,
  • center: Center and align
  • stretch: Fills the grid container
  • space-around: Place an equal amount of space in the middle of each grid item, half the size at the beginning and end
  • space-between: Align both sides, place equal space in the middle of each grid sub-item, with no space at the beginning and end
  • space-evenly: Grid spacing is equal, including beginning and end

Align-content if defined in inelastic units like PX, the total mesh area size may be smaller than the mesh container, so you can set the mesh alignment (aligned perpendicular to the grid line).

The align - content: start | | end center | stretch | space - around | space - between | space - evenly copy codeCopy the code
  • start: Top aligned
  • end: Bottom aligned
  • center: Center and align
  • stretch: Fills the grid container
  • space-around: Place an equal amount of space in the middle of each grid item, half the size at the beginning and end
  • space-between: Align up and down, place equal space in the middle of each grid subitem, with no space at the beginning and end
  • space-evenly: Place equal space in the middle of each grid item, including the beginning and end

2.6 Grid-auto-columns/Grid-auto-rows automatically generates implicit grid tracks (columns and rows) when you locate grid items outside of the grid container.

Grid-auto-columns: <track-size>grid-auto-rows: <track-size> Copy codeCopy the code
  • <track-size>: can be a length, percentage or the number of shares of free space in a grid (by using FR units)

To illustrate how implicit grid traces can be created, consider this:

.container{ grid-template-columns: 60px 60px; Grid-template-rows: 90px 90px} copies the codeCopy the code

In the code above, we created a 2 x 2 grid.



But now imagine you useThe grid - the column and the grid - rowTo position your grid subitems like this:

.item-a{ grid-column: 1 / 2; grid-row: 2 / 3; } .item-b{ grid-column: 5 / 6; grid-row: 2 / 3; } Duplicate codeCopy the code

We’re telling item-B to start on column 5 and end on column 6, but we haven’t defined column 5 or column 6 yet. Because the lines we referenced do not exist, implicit grid traces of 0 widths will be created to fill these gaps. We can use grid-auto-columns and grid-auto-rows to specify the width of these implicit grid tracks:

.container{ grid-auto-columns: 60px; } Duplicate codeCopy the code

2.7 the grid – auto – flow

This property controls how grid items are arranged when their position is not set.

The grid - auto - flow: row | column | row dense | column dense duplicate codeCopy the code
  • row: Arranged in rows from left to right
  • column: Arranged in a column from top to bottom
  • dense: In order of precedence

Take a look at the following example:

<section class="container"> <div class="item-a">item-a</div> <div class="item-b">item-b</div> <div Class ="item-c">item-c</div> <div class="item-d">item-d</div> <div class="item-e">item-e</div> </section> Copy the codeCopy the code

Grid-auto-flow: row; grid-auto-flow: row

.container{ display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; } Duplicate codeCopy the code

Then set the grid sub-item layout:

.item-a{ grid-column: 1; grid-row: 1 / 3; } .item-e{ grid-column: 5; grid-row: 1 / 3; } Duplicate codeCopy the code

Because we set it upThe grid - auto - flow: the row, item-b, item-c, and item-d are arranged from left to right on the row as follows:

If we setgrid-auto-flow: column, the results are as follows:

Grid is a shorthand form:

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ]; Copy the codeCopy the code

3. Attributes of grid sub-items

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

Grid lines define the position of grid items. Grid-column-start and grid-row-start define the start position of the grid item, grid-column-end and grid-row-end define the end position of the grid item.

grid-column-start: <number> | <name> | span <number> | span <name> | auto ; grid-column-end: <number> | <name> | span <number> | span <name> | auto ; grid-row-start: <number> | <name> | span <number> | span <name> | auto ; grid-row-end: <number> | <name> | span <number> | span <name> | auto ; Copy the codeCopy the code
  • <number> | <name>: can be a number for a grid line marked with a number, or a grid line named for a grid line
  • span <number>: subitems span the grid trace of the specified number
  • span <name>: subitems will span the grid line before the specified name
  • auto: Automatic layout, automatically across or default across one.

Example:

.item-a{ grid-column-start: 2; grid-column-end: five; Grid-row-start: row1-start grid-row-end: 3} Copy codeCopy the code

.item-b{ grid-column-start: 1; grid-column-end: span col4-start; Grid-row-start: 2 grid-row-end: span 2} Copies codeCopy the code

Grid-column is short for grid-column-start and grid-column-end; Grid-row is short for grid-row-start and grid-row-end.

grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; Copy the codeCopy the code

Example:

.item-c{ grid-column: 3 / span 2; grid-row: third-line / 4; } Duplicate codeCopy the code

3.2 the grid – area

Give the grid subitem a name to be referenced by the template created by the grid-template-Areas attribute. This property can also be used more briefly to represent grid-row-start+ grid-column-start + grid-row-end+ grid-column-end.

grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; Copy the codeCopy the code
  • <name>: Selected name
  • <row-start> / <column-start> / <row-end> / <column-end>– Can be the number or name of the grid line

Example:

As a way of assigning a name to a grid subitem:

.item{. Item -d{grid-area: header} Copies the codeCopy the code

Grid-row-start + grid-column-start + grid-row-end+ grid-column-end

.item-d{grid-area: 1 / col4-start/last-line / 6} Copies the codeCopy the code

3.3 the justify – self/align – self

(1) the justify – self

Aligns the contents of grid subitems with the column axis (as opposed to align-self, which aligns with the row axis). This value can be applied to the contents of individual grid subitems.

The justify - self: start | | end center | stretch to copy codeCopy the code
  • start– Align the content left in the grid area
  • end– Align the content right in the grid area
  • centerAlign the content in the middle of the grid area
  • stretch— Padding the width of a network area (default)

(2) the align – self

Allows the contents of grid subitems to be aligned on the row axis (as opposed to justify-self), which can be applied to the contents of individual grid subitems.

The align - self: start | | end center | stretch duplicate codeCopy the code
  • startAlign the content on the grid area
  • endAlign the content under the grid area
  • centerAlign the content in the middle of the grid area
  • stretch— Fill the height of a network area (default)

Parameter article:

A complete introduction to Grid

A Complete Guide to Grid

Introduction to the Grid

If there are mistakes, welcome to correct!