CSS3 Grid Layout (grid-layout) Basics-Grid template properties (grid-template) Usage notes

CSS3 introduces a new grid layout that adapts to the development of display and design techniques (especially mobile-first responsive design).

The main goal is to create a stable, predictable, and semantically correct Web layout pattern that replaces the dynamic layout of Web pages that have previously been erratic and cumbersome in the form of table, flow, and JS script blending techniques.

This article will be a simple and accurate introduction to the basic concept of grid layout properties and how to use it (excerpt from the online HTML5 tutorial).

1. Overview

Grid template Area (grid-template-areas), grid template row (grid-template-rows), and Grid template column (Grid-template-columns), these 3 properties collectively explicitly define a grid container.

The grid template (Grid-template) property is a sketch (shorthand) that is used to set these 3 properties at the same time. The grid items content may exceed the explicit grid, when the mesh container automatically generates an implicit track (implicit-track), the dimensions of which are determined by the Grid-auto-rows and Grid-auto-columns properties.

The size of the explicit grid is determined by the number of rows/columns defined by the grid template area and by the larger of the number of rows/columns in the grid template row/Grid template column properties that define the dimensions.

Any row or column defined by the grid template area but not defined in the grid template row/Grid template column, the size is determined by the Grid-auto-rows or Grid-auto-columns property.

If an explicit track is not defined, the explicit grid still contains a grid line on each axis.

The numeric index in the grid positioning (grid-placement) property is calculated from the edge of the explicit grid. If starting from the start side, the index is a positive number starting at 1. Conversely, starting from the end side, the negative number starts with-1.

2. Track Size: Grid-template-rows and Grid-template-columns

These two properties are used to define a set of space-separated list of tracks (track list), which itself is defined using the grid line name and the track size function.

The track size function can be a specific length, a percentage relative to the grid container, the actual padding of the content (such as min-content), or the free space fragment.

It is also possible to specify a range of lengths through the Minmax (Min,max) function, which is a dimension between Min and Max, where the Min/max parameter can also use the dimensions defined above.

The Grid-template-columns property specifies the list of tracks for the grid column, while the Grid-template-rows property specifies the list of tracks for the grid row.

3. Named range: Grid-template-areas Property

This property specifies the named grid range, which is independent of any particular grid item, but can be referenced in the grid positioning (grid-placement) property.

The grid template area (Grid-template-areas) property also provides a visual grid structure that makes the overall layout of the grid container easier to understand.

<string>+ represents a series of strings.

Each individual string (string) in the Grid template region property defines a row, and each cell in the string defines a column.

The browser uses the longest matching semantics to parse the string into the following list of tokens (tokens):

1. A string of name coding points (name code points), which represents a named unit tag (named cell token), whose name consists of code points, which is a character in Unicode encoded space.
2. A string of single or multiple ".", which represents an empty cell token (null cell token).
3. A string of spaces (whitespace), which means no markup is generated.
4. Other strings, which represent a spam token (trash token).

4. Application examples

The above description is strict but a bit rigid, we still use a classic responsive multi-row page Layout example to illustrate:

[CSS Code]

#page {  Display:grid;  width:100%;  height:250px;  Grid-template-areas: "Head Head" "                       nav  main"                       "foot ...";  grid-template-rows:50px 1FR 30px;  grid-template-columns:150px 1FR;} #page > Header {  grid-area:head;  Background-color: #8ca0ff;} #page > Nav {  grid-area:nav;  Background-color: #ffa08c;} #page > main {  grid-area:main;  Background-color: #ffff64;} #page > Footer {  grid-area:foot;  Background-color: #8cffa0;}

[HTML code]

<section id= "page" >  

The code above defines an elastic layout of 3 rows and 2 columns through Grid-template-areas:
1. Adjacent 2 head strings will generate a grid area called Head, spanning 2 columns;
2. The nav, main, and foot strings each generate 3 mesh regions with their namesake;
3.4 points (...). ) to generate an empty grid area.

The track heights of each row are then defined by Grid-template-rows,
1th, 3 lines are 50px and 30px fixed height respectively, the second behavior elastic size can be used in space minus fixed size, according to the proportion of the length of the elastic factor distribution,
There is only one elastic dimension here, and the elastic factor is 1, which means to occupy all the remaining space width (i.e.: Mesh container width-50px-30px).

The width of each column track is defined by Grid-template-columns. The 1th column is 150px fixed width and the 2nd row occupies the remaining space in the horizontal direction.

You can test it yourself by using an online example: http://wow.techbrood.com/fiddle/15975

Note: The grid layout-related specifications are still in the working draft state, so do the actual testing in the browser to identify their compatibility. 】

by Iefreer
CSS3 Grid Layout (grid-layout) Basics-Grid template properties (grid-template) Usage notes