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

CSS3 introduces a new grid layout (grid layouts). To adapt 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 briefly and accurately introduce the basic concepts and usage of Grid layout properties (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 be outside the explicit grid, and the grid container will voluntarily generate an implicit track (implicit tracks), 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.

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

Assuming no explicit tracks are defined, the explicit grid still includes 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. Suppose you start at the beginning. The index is a positive number beginning with 1. Conversely, 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 detailed in length, relative to the percentage of the grid container, computed by the actual padding (such as min-content), or free space fragments.

It is also able to specify a range of lengths through the Minmax (Min,max) function. That is, a dimension between Min and Max. The same Min/max parameters can be used to define these dimensions as mentioned earlier.

The Grid-template-columns property specifies the list of tracks for the grid column. 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. Make the overall layout of the grid container easier to understand.

<string>+ represents a series of strings.

A row is defined for each individual string (string) in the grid template region property. Each cell in the string defines a column.

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

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 ".". Represents an empty cell token (null cell token).
3. A string of spaces (whitespace), which means no tokens are generated.

4. Other strings, which represent a spam token (trash token).

4. Application examples

The description described above is strict but somewhat inflexible. We'll also use a classic, responsive, multi-column, multi-row page layout instance 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 generate 3 mesh regions with the same name as each.
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 the fixed size of the elastic factor according to the proportion of the length of distribution,
There is only one elastic dimension here, and the elasticity factor is 1, which means that all the remaining space is occupied (that is, the width of the mesh container-50px-30px).

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

You can test 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 please do a real test in the browser to identify their compatibility. 】

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