Responsive Web Design-layout

Extensible layouts

The concept of a fluid layout began to prevail when the early web arose. Its concept is that the page will be changed according to the browser window changes, the site can be maintained by a set of code, quality consistency design. The extensible layout I'm emphasizing here is also based on this concept, but there are a variety of ways to emphasize the extensibility of page layouts.

There are a number of extensible layouts, such as a common percent layout, and a grid layout that has not been standardized.

• Framework

From this framework, as an example of a common, extensible three-column layout, there are dozens of ways to cite a few examples.

Method 1:

Demo1

Method 2:

Demo2

Method 3:

Demo3

Method 4:

Demo4

Method 5:

Demo5

Method 6:

Demo6

Method 7:

Demo7

Method 8:

Demo8

Method 9:

Demo9

In addition to the above summary of several, there are more ways. The two-column layout does not dwell on the same.

The website also has a grid layout specification, which is based on a two-dimensional grid system designed to easily change the design of the page as we wish. It works better with Flexbox. But it is still at the draft stage. Read the latest draft content, the use of grid layout method and the principle of a simple introduction. 1) Define the grid: First define the Display:grid on the parent container outside the grid item. Values:

• Grid -Defines the grid for Block-level;
• Inline -A raster that defines inline-level

2) Some related concepts:

• Grid lines-a line that divides a grid horizontally and vertically, it can be specified once a numeric order, or it can be specified with a user-defined name.

• Grid tracks-refers to a grid column or area before the row, in other words, the space before the two adjacent grid lines. is the grid tracks between the second row and the third row.

• Grid cells-a grid cell refers to the smallest unit in a grid.

• Grid areas-is the logical space used to represent one or more grid item. It is surrounded by four grid lines.

3) After the grid item property has learned some basic concepts, it is possible to understand the relevant grid item property in more velvet.

• Grid-column-start
• Grid-column-end
• Grid-row-start
• Grid-row-end

Of these four attributes, Grid-column-start and Grid-row-start indicate the area start line, grid-column-end and grid-row-end indicate the area end line. These four properties all have the following four values to be desirable. Values:

• <line> -can be a number that stands for grid line
• span <number> -This item spans the provided digital grid tracks
• span <name> -the item spans the grid line until it encounters the next named name
• Auto-automatic or Default properties

As an example:

The area represented is:

In addition to the above mentioned, the grid has more properties that can define grid item's width, GAP, internal adaptive way, alignment, and so on. More properties can refer to the documentation.

Responsive Web Design-layout