CSS3 Grid Layout module: Grid Layout implementation page layout

Article Introduction: a task of the CSS3 grid layout module is to help us deal with very simple and clear any web-imposer (not only), most likely a content block in a virtual network location.

Objective

In my opinion, the CSS3 grid layout module is one of the most interesting in the CSS3 module family. The official website has been published in less than a year since the release of the draft. It is important to note that some of the names and grammars have changed in the WD version announced in 2007, but they have the same nature. Today, the module is moving forward, and has been initially implemented in IE10, hoping that the new features will be supported in the future and that other popular browsers would support this module.

Why do we need grid layout?

A task of the CSS3 grid layout module is to help us deal with very simple and clear any web-imposer (not only), most likely a content block in a virtual network location.

Compared to the old table method, the table is based on a table used, which has clear document semantics and separation of content and structure. Using different structure tags in a template, using multiple floats and manual computations to implement a layout is difficult, and the method presented here becomes very simple and clear. Compared with absolute positioning, the grid is more flexible. Compared to today's popular CSS/JS libraries, these libraries use the grid to specify the appropriate class name (as an example, such as Bootstrap and Yui css grids), while in the grid layout module There is no need to add these class names.

It's so cool! Now wait for a wide range of browser support. However, if you want to do a Win8 like Metro style application, still using HTML/JS, more crucially, you can use CSS3 Grid layout module to make the layout, which can be compatible with the mobile end, easy to use, and practical.

Basic

First let's look at the grid layout from the example. Imagine that you need to make a classic three-column layout, and this layout requires about one of the following tags:

<section>   
 
We need a three-column layout as shown in the following illustration:
 
 
This is a classic layout, so we will not pay much attention to the traditional method of implementing this multiple-column layout using what tags. We are concerned with the use of CSS3 grid layout What can we do? (In one instance, I skipped the browser prefix, and in practice, I should add IE's prefix "-ms-" to the example).
 
The following is the CSS code used in this example:
 
Section {   display:-ms-grid;   grid-columns:150px 1FR 200px;   grid-rows:50px 1FR 50px; Section   Header {   grid-column:2;   Grid-row:1; Section   nav {   grid-column:1;   Grid-row:2; Section   article {   grid-column:2;   Grid-row:2; Section   aside {   grid-column:3;   Grid-row:2; Section                           footer {   grid-column:2;   Grid-row:3; }	 
 
You want to specify a container (section) for the grid, where the contents are located on the grid and use the Grid-columns, Grid-rows properties to set a virtual grid (these properties are described below). Further we should specify the location for the elements within the container.
 
 
The whole includes:
 

 

 
  
 
   
Virtual grid: the Grid-columns and grid-rows components in a container.
 
   
element Rotation:Grid-column and Grid-row
 
  

 
 
Now let's take a look at these details and more possibilities.
 
Virtual Grid 
Grid trajectories: Rows and columns
 
In order to be able to place elements, you need to create a virtual grid. So we need to describe the rows and columns in the grid trajectory:
 
#grid {    Display:grid;    grid-columns:150px 1FR; /* Two column    /grid-rows:50px 1FR 50px;/* Three line/  }	 
 
Grid lines
 
The grid track is between the two gridlines and revolves around him, and each grid track has a grid line on top, below, left, and right.
 
 
How to set the position of the element in the grid, you need to explicitly specify which horizontal and vertical lines to start from.
 
#item {   grid-column:2;   Grid-row:2; }	 
 
 
By default, the space occupied by the element is below the specified grid line. (This looks like a number of cell numbers, and our elements are similar to those placed in cells).
 
Extended cells
 
Extension elements occupy several grid cells, and we typically use the Grid-now-span and Grid-column-span properties to:
 
#item {   grid-column:2;   Grid-column-span:3;   Grid-row:2;   Grid-row-span:2; }	 
 
 
By default, the values for both properties are "1". You can extend this on a demand basis.
 
Repeat track 
You often select a grid based on the container structure template.
 
#grid {   Display:grid;   Grid-columns:  24px 120px 24px 120px 24px 120px 24px 120px 24px;   GRID-ROWS:1FR 24px 1fr 24px 1fr 24px; }	 
 
 
It will be a clearer description of the grid, and the example above can be described in this way:
 
#grid {   Display:grid;   Grid-columns:  24px (120px 24px) [4];   Grid-rows: (1fr 24px) [3]; }	 
 
The parameters of the template itself are placed in parentheses, followed by the number of repetitions specified by the square brackets.
 
Now, when we know the basic description of the grid line, we go back to the grid and try to understand some specific unit of measurement.
 
Unit of Measure 
As you've noticed, here you use a special unit to specify the size of the columns and rows--1FR. Now, we'll discuss this and other possible values to specify the length.
 
In describing column widths and row heights, you can use the following units and values:
 

 

 
  
 
   
Linear Dimension: the standard unit used to specify the length. CSS3 values and unit modules are described in detail, such as PT, PX, EM, VW, and so on.
 
   
percent: Specifies the grid track by a percentage of the size of a grid container. (If the width and height of the grid depend on the size of the content, the result is infinite)
 
   
Score: is a non-negative number, followed by a FR unit, each of which is determined according to the proportion of the numerical value. (see below for a detailed description)
 
   
max-content: is a keyword that is determined by the maximum length of the elements in the grid orbit.
 
   
min-content: is a keyword that is determined by the minimum length of the elements in the grid orbit.
 
   
Minmax (Min,max): a range of set values. (The working principle can be described as: Minmax (p,q) =max (p,min (valid fill, q))--from a minimum to a maximum free space range.
 
   
Auto: is a keyword, equal to Minmax (min-content,max-content).
 
  

 
 
Fractional Value 
Let's try to understand how the value of a division works. A grid occupies a certain width and height of space. This may depend on the content, which is strictly fixed or occupies all the space accessible to the external container. Further, the number of columns and rows in your grid orbit can be set clearly. How to set their size, for some other part depends on the length of the content.
 
Now we have access to a grid container with his horizontal and vertical widths minus the width and height of the content. The extra space is divided by numerical proportions.
 
 
In the example above, the column width and row height are shown in three columns by width 2:1:1 and two rows by 5:2 height.
 
Example
 
An example copied from the draft specification lets me see different types of keywords and values:
 
#grid {   Display:grid;   grid-columns:100px 1fr max-content Minmax (min-content, 1FR)}	 
 
The detailed description is as follows:
 

 

 
  
 
   
Start with the first line.
 
   
At 100 pixels from the first line.
 
   
The other line is 1/2 of other spaces, starting with the second one.
 
   
From the third line, start the largest content column.
 
   
The last line is the fourth line, and he equals the minimum width of the element or 1/2 of the extra space.
 
  

 
 
There is a slight difference, and the maximum and the small values appear within the user, and they are considering a decimal value as the maximum position. The score marks the lowest position is considered equal to 0, detailed details please refer to the specification.
 
Next we will try to find the elements that replace the grid lines between their positions (cells within the grid).
 
binding Elements 
Now, the problem with binding elements to grid rows is: How are they placed between network lines?
 
 
Binding elements are controlled by the Grid-column-align and Grid-row-align properties at the edge of the grid. Their attribute values mainly include the following:
 

 

 
  
 
   
Start
 
   
End
 
   
Center
 
   
Stretch
 
  

 
 
These values tell us from the name what their display behavior is. I will only notice that the problem in each case is the distance between the positioned element and its container. The default value for these two properties is stretch, which means that the extruded element is the same size as the container.
 
 
The element binding in the column (horizontal direction) corresponds to the text direction (for example, some Arabic, starting from the right to the left end). element bindings correspond to the direction of the block (in vertical direction) (which means that some East Asian languages, rows, and columns can change their position, by the way).
 
Control Layer 
The next focus is on how the elements are positioned within the grid. What happens if two elements are bound to the same row, or the extension is arranged to the same cell?
 
The most important thing to understand is the subtle differences that are placed in the grid without directly affecting each other's position. If you bind 10 elements to the horizontal orientation of the grid, the second gridline and the vertical third grid line start at the beginning. So by default they will all take their place and cascade together. Each element is bound to a corner corresponding to the grid. These elements can affect only the grid track, if they are bound, then it will affect the size of the content.
 
 
To control the order in which these layers are displayed, the current specification version uses the Z-index property, allowing you to manage the hierarchy of elements within the grid.
 
Note: In the previous version specification based on IE10, a Grid-layer attribute was used to specify the element-level relationships within the grid without using Z-index. However, in the course of further discussion, the Working Group decided to reconsider the use of the Z-index attribute.
 
Look at an example:
 
#grid {   Display:grid;   Grid-columns: (1FR) [3];   Grid-rows: (1FR) [4]; }   #A {   grid-column:1;   Grid-row:3;   Grid-column-span:2; }   #B {   grid-column:1;   grid-row:1;   Grid-row-span:2;   /* GRID-LAYER:10; * *   z-index:10;       margin-top:10px; }   #C {   grid-column:1;   grid-row:1;   Grid-column-span:2;   margin-left:50px; }   #D {   grid-column:2;   Grid-row:3;   Grid-row-span:2;   Grid-column-span:2;   margin:10px 0 0 10px; }   #E {   grid-column:2;   Grid-row:2;                   /* GRID-LAYER:5; * *   z-index:5;    margin: -20px; }   
 
 
CSS3 Grid Library 
So far, only ie10+ browsers can support the grid layout module, and other browsers are not supported. But it can use the JS library Ecsstender and extended grid alignment , they support the following attributes:
 

 

 
  
 
   
Display:grid
 
   
Grid-columns and Grid-rows
 
   
Grid-column and Grid-row
 
   
Grid-column-span and Grid-row-span
 
  

 
 
You can view this instance .
 
about the future 
Finally, let's look at a little bit about how theCSS3 Grid Layout module will change in the future.
 
The possibilities mentioned below are mentioned in the draft specification, but there are no browsers to support these features. Whether future support depends on the organization of the Consortium.
 
Grid line that specifies the end of the element explicitly
 
You can also specify the opening gridlines for the grid that the element occupies, and you can assign their end gridlines:
 
#item {   grid-column:2;   Grid-row:2 4; }   
 
 
Unlike the span mechanism, he specifies the number of cells that an element must span horizontally and vertically, and it is possible to explicitly specify which line to start and end from. It also makes it easy to use the grid line name.
 
Grid line naming
 
For convenience, it may be named. It is used to describe the grid track by inserting a string value at the appropriate location. (You can define a different name, for example, from a semantic point of view, if you really want to.):
 
#grid {   Display:grid;   Grid-columns: "Nav" "150px" "Content" 1fr "last";    Grid-rows: "Header" 50px "Content" 1FR "footer" 50px;     
 
These names can be referenced on the element:
 
#menu {   grid-column: "NAV";   Grid-row: "Content"; }   #header {   grid-column: "Content";   Grid-row: "Header"; }   #article {   grid-column: "Content";   Grid-row: "Content"; }   
 
 
There is also a specification that has been named four grid line names--the start and end of the vertical and horizontal side, in fact they build the entire grid. For example, the navigation menu in the first column, from the first row to the last row, and the footer element from the second column to the last column, does not need to count how many rows and columns are available.
 
#menu {   grid-column:1;   Grid-row:start end; }   #footer {   grid-column:2 end;   Grid-row:3; }   
 
 
Cell and template naming
 
In the future, there is another way to create a virtual structure template by naming a cell based on the template element name:
 
#grid {   Display:grid;   Grid-template: "LN"                  "ma"                  "ba"                  "FF";     Grid-columns:auto Minmax (min-content, 1FR);    Grid-rows:auto Minmax (min-content, 1FR) Auto auto; }   
 
 
Therefore, you can use this rule to bind an element to one or another virtual grid:
 
#article {   Grid-cell: "A";}   
 
If you change the position of the element according to different conditions, such as the screen resolution, even change the grid itself. So this is a cool way to do it:
 
@media (orientation:portrait) {   #grid {     display:grid;     Grid-template: "LN"                    "ma"                    "ba"                    "FF";       Grid-columns:auto Minmax (min-content, 1FR);      Grid-rows:auto Minmax (min-content, 1FR) auto auto;   } }   @media (orientation:landscape) {   #grid {     display:grid;     Grid-template: "LN"                    "ma"                    "MB"                    "SF";       Grid-columns:auto Minmax (min-content, 1FR);      Grid-rows:auto Minmax (min-content, 1FR) auto auto;   } }   #a       Grid-cell: "A";}   
 
 
Note that the name used in this article to name the cell does not change. (Although these properties are not available yet, we wait until the browser supports these features).
 
Summary 
In this article, I would like to try to introduce the key parts of the CSS3 grid layout module . I hope I can inspire people to know more than I do.
 
I will remind you that the modules are constantly being updated and that the organization is constantly collecting comments and revisions. You can see some of the basic functionality implementations in Internet Explorer . Here are a few examples:ietestdrive.com: Thegrid System and hands on:css3 grid Layout.
 
 
I will also continue to look at the update of the CSS3 grid layout module, and now the browser that supports the Grid layout module is only IE10, and it is possible to use the Grid layout module and html/js to develop WINDOWS8 Metro style in the future.
 
Translator's Sign Language: the entire translation is carried out according to the original line, and in the process of translation slightly individual understanding of the technology. If the translation has the wrong place, but also please peer friends pointing. Thank you!
 
If you want to reprint, please indicate the source:
 
Original English:http://www.splashnology.com/article/introduction-into-css3-grid-layout-workingwith-grids/5762/