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.
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