Grid layout is a new layout method proposed by Microsoft in 2010, and submitted the draft of the layout in 2016. After three or four years of development, Grid layout has gradually become mature, compatibility is getting better and better, and it can be properly learned and used

A few points of this study:

  • CSS layout development process
  • Grid layout benefits and related terminology
  • Use of Grid layouts
  • Notes and remarks
  • The resources

But before we get started, how does it work

For example, this page is laid out with the grid:

The Grid layout

The grid

A grid is a set of intersecting horizontal and vertical lines that define the rows and columns of a grid

CSS layout development process

  • tableTable layout:tableMore than any otherhtmlMarkup takes up more bytes, the layout is rigid and inflexible, and it blocks the rendering order of the browser’s rendering engine, making it slow to load
  • float + positionMode layout: usefloatFloating andpositionPositioning to layout,floatThis causes elements to fall out of the document flow, float height collapses, and additional clear floats are needed to address these height collapses and the difficulty of vertically centering
  • flexboxElastic layout: One-dimensional layout, best used for application components and smaller layouts, is easier to use and more supportive
  • gridGrid layout: Two dimensional layout, suitable for large scale layout

For example, there are two types of layouts that work well with grid layouts:

Note ~ ~

I think Grid layout is not to replace the above layout methods, but in combination with the above methods, with simpler code to achieve page layout

Benefits of Grid layout

advantage

  • Fixed or elastic rail size: can give each set the size of the fixed orbit, also can set auto fr | | 1 10% the size of the elastic, such as the actual display size of the orbit will be high as the width of the parent

  • Location items: You can assign a specific location to each child item

  • Create an implicit track: An implicit track is created when the location of the child exceeds the size of the track set by the parent

  • Alignment controls: As with the Flexbox, there are several alignment controls

  • To control overlapping content, set the z-index value on the sub-item directly

compatibility

PC browser compatibility is good, IE10 and 11 need to add -ms- to achieve compatibility

Note the following on the mobile terminal :ios10.3 or later is not supported

Related terms in Grid layouts

  1. Grid Container: grid container, an element applieddisplay: grid;Then there is a grid container, which is the parent of all grid items, as in the following code<div class="grid"></div>That’s the grid container
// html
<div class="grid">
	<div class="grid-item1">grid-item1</div>
	<div class="grid-item2">grid-item2</div>
	<div class="grid-item3">grid-item3</div>
	<div class="grid-item4">grid-item4</div>
	<div class="grid-item5">grid-item5</div>
	<div class="grid-item6">grid-item6</div>
</div>

//css
.grid {
	display: grid;
}
Copy the code

  1. Grid item: Grid item. The grid-item above is the Grid sub-item

  2. The virtual 3×4 Grid below has four horizontal and five vertical Grid lines

  1. Grid track: track, grid track, grid track between two adjacent grid lines

As shown below: there are altogether 7 grid tracks, 3 in the horizontal direction and 4 in the vertical direction

  1. Grid Cell: Grid cell, a grid cell composed of two adjacent column grid lines and two adjacent row grid lines. A grid item is a DOM element in HTML, and a grid cell is a grid cell separated when defining a grid container

  1. Grid areaGrid area the total area enclosed by four grid lines, unlike grid cells, which must be adjacent grid lines

  1. Units:frUnit: Remaining space allotment, used to allocate the remaining space in a series of length values, in numerical proportions

Such as:

If the total grid width is 600px, then in the following setting 1FR = (600-50-150) * (1 / (1+3)) = 100px

.grid {
	grid-template-columns: 50px 1fr 3fr 150px;
}
Copy the code

Properties in containers

View the practice demo

  1. display

Its value is:

  • display: grid;: set to the container element

  • display: inline-gridIs set to a container element and is an inline grid

  • display: subgridThis property is used to inherit the column and row sizes of the parent grid container if the grid container itself is a grid item

Its compatibility is very poor, basic can not understand first

  1. grid-template: defines the orbital size of rows and columns. This is a compound notation. The properties include:
  • grid-template-rows: Divides rows horizontally. The value is the height of each row, separated by Spaces
  • grid-template-columns: Vertically divided columns. The value is the width of each column, separated by Spaces
  • grid-template-areas: grid partition area, the value is named

Grammar:

.container { grid-template-rows: <track-size> | <line-name> <track-size>; grid-template-columns: <track-size> | <line-name> <track-size>; Grid - the template - areas: < the grid - area - the name >. | | none < grid - area - the name >. | | none} / / composite writing: the container {grid - the template: <grid-template-rows> / <grid-template-columns> }Copy the code

  • : you can use the CSS length unit, percentage, auto or a new unit fr where auto is used to indicate the remaining length unit FR: after the other fixed width is set, the remaining length unit is proportional, similar to flex: n;

  • : Name can be set for each grid line [any name]


  • : region name “any name”

.container {grid-template-rows: [first line] 25% 100px auto; Grid-template-columns: [first column] 100px 20px auto 40px; }Copy the code

The performance is as follows:

Grid-template-areas: sets the area name

  1. grid-gap: The width of the space between rows and columns, which is a compound of two properties

  • Grid-gap-rows: The spacing between rows

  • Grid-gap-columns: The interval between columns

.container { grid-gap-rows: 20px; grid-gap-columns: 10px; Container {grid-gap: 20px 10px; }Copy the code
  1. place-items: composition of horizontal and vertical alignment within each cell
  • justify-items: Horizontal alignment
  • align-items: Vertical alignment

Both attributes have the following values

  • stretch: the default value, horizontal | vertical tensile filling content
  • startContraction: horizontal vertical | | (width height) for content size, (on the left side of the | upper) alignment
  • endContraction: horizontal vertical | | (width height) for content size, aligned (| at the right side)
  • centerContraction: horizontal vertical | | (width height) for content size, center alignment
.container {
	place-items: <align-items> / <justify-items>;
}
Copy the code
  1. place-content: The combination of the following two attributes represents the horizontal layout of network elements
  • justify-content: only works if the total grid width is smaller than the grid container width

Values are classified as follows:

  • Fill the grid container with a width of auto. If the grid size is auto, it cannot be stretched
  • Start: left-aligned
  • End: align it right
  • Center: center
  • Space-between: aligns both ends
  • Space-around: Each grid subitem is surrounded by a non-interfering equal width of blank space on both sides, resulting in a visual margin that is half the width of the middle blank space on both sides
  • Space-instituted: each grid subitem will evenly spaced on both sides
  • align-content: The vertical layout of network elements, which does not take effect if the grid child has only one row, as above
  1. grid-auto: Compound notation of the following three properties

Grid-auto demo

  • Grid-auto-rows: Redundant cells of a grid project that create implicit tracks

  • Grid-auto-columns: Redundant cells of a grid project that create implicit tracks

.container {
	grid-auto-rows: 100px;
	grid-auto-columns: 70px;
}
Copy the code
  • grid-auto-flow: Controls the placement of grid children where no explicit location is specified

Values are classified as follows:

  • Row: The default value, the grid with no specified position is arranged in a sequential horizontal direction
  • Column: Grid in vertical order without a specified position
  • Row dense: Automatic alignment starts dense ordering, horizontal
  • Column dense: Automatic alignment starts intensive ordering, vertical

Look at the sample demo

  1. grid: Compound of the following properties:
  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

The specific values are as follows:

Grid: <grid-template> 3. Grid: <grid-template-rows> / [auto-flow && dense?]  <grid-auto-columns>? 4.grid: auto-flow & dense ? <grid-auto-rows> ? / <grid-template-columns>Copy the code

Auto – flow: it means the value of the row | column, unified use auto – flow, however, the specific need to see where is it placed, if placed in/on the left side, said the grid – auto – flow: Row, if placed to the right, represents grid-auto-flow: column

Grid: 100px 60px / 1fr 2fr equivalent to: grid-template-rows: 100px 60px; grid-template-columns: 1fr 2fr; 3. Grid: 100px 60px/auto-flow 1fr 2fr equivalent to: grid-template-rows: 100px 60px; grid-auto-columns: 1fr 2fr; grid-auto-flow: column 4.grid: auto-flow dense 100px 60px / 1fr 2fr; Grid-auto-rows: 100px 60px grid-template-columns: 1fr 2fr; grid-auto-flow: row denseCopy the code

Example of grid composition: Grid composition demo

The above properties are values of the outer container properties

Properties that act on container children

Operation of the demo

  1. grid-column: Compound of the following two properties
  • grid-column-start
  • grid-column-end
.item {
	grid-column-start: <name> | <number> | span <name> | span <number>
	grid-column: <start-line> <end-line>
}
Copy the code

Meaning of value:


Name of a custom gridline


Start at the grid line number

Span

The current grid is automatically expanded until the specified grid line name is matched

Span

The current grid automatically spans the specified number of grids

Auto Full automatic, including positioning and span

For example, in the figure below, Item-A defines it from the first horizontal grid line to the third horizontal grid line, and from the second vertical grid line to the third vertical grid line, occupying rows 1, 2, and 2 columns

  1. grid-row: Compound of the following two properties
  • grid-row-start
  • grid-row-end
.item {
	grid-row-start: <name> | <number> | span <name> | span <number>
	grid-row: <start-line> <end-line>
}
Copy the code
  1. grid-area: Area occupied by the current grid, usedgrid-template-areasTo customize a network zone, usegrid-areaHaving the grid subitem specify these usage areas automatically distributes regions. For example:
Grid-area: <name> Region name, created by the container property grid-template-area <row-start> / <column-start> / <row-end> / <column-end> occupies the starting position of the grid regionCopy the code
  1. justify-selfHorizontal alignment of individual grid elements

Values are classified as follows:

  • Stretch (default) : stretch and fill horizontally
  • The start horizontal size shrinks to the content size, aligned along the grid line to the left
  • The horizontal size of end shrinks to the content size and is aligned along the right side of the grid line
  • The horizontal size of center shrinks to the content size, and the interior of the current area is horizontally centered and aligned
  1. align-selfVertical alignment of individual grid elements for example:
  • Stretch (default) : stretch, vertical fill
  • The start vertical size shrinks to the content size, aligned along the upper side of the grid line
  • The vertical dimension of end shrinks to the content size, aligned along the side of the grid line
  • The center vertical size shrinks to the content size, and the interior of the current area is vertically centered and aligned

Use place-self to write place-items:

/ < context-self >

CSS functions in grid layouts

View demos of CSS functions

  1. repeat(): Tracks repeated fragments of a list, allowing a large number of rows or columns that repeat the display pattern to be written in a more compact manner

Available ranges: grid-template-columns and grid-template-rows

Syntax: repeat(

,

)


: The values can be:

'<auto-fill>' : automatic filling based on the grid item, which needs to be used in conjunction with the minmax() function. 3. '<auto-fit>' : automatic filling based on the grid container, which needs to be used in conjunction with the Minmax () functionCopy the code


: The value can be:

1. Fixed length 2. Percentage 3. Fr units 4. Max-content: indicates the cell with the largest track length adaptive content 5Copy the code

Can be used multiple times

grid-template-columns: 20px auto repeat(3, 1fr) 40px

  1. fit-content()The: argument is a length value or percentage

Min (maximum size, Max (minimum size, argument))

It takes a maximum value in the minimum value of the content and parameters, and then a minimum value in the maximum value of the content

If the content is small, it takes the length of the content, if the content is large, the length of the content is greater than the length of the argument, it can be interpreted as controlling what the maximum value is

  1. minmax(min, max): Defines the length range

Values:

1. Fixed length 2. Percentage 3. Fr units 4. Max-content: indicates the cell with the largest track length adaptive content 5Copy the code

Matters needing attention

  • The column, float, clear, vertical-align attributes are invalid when the element has a grid layout
  • Grid layout is a two-dimensional layout, suitable for overall layout

A grid demo

The resources

Zhang Xinxu Space: Grid layout

MDN: grid

Ruan Yifeng: CSS Grid layout tutorial