On the grid layout of CSS

Grid layout Presumably we all know well, when we do page development, often the requirements of the page plate is very high, how to layout the content of each area, and make it alignment is a big problem for us. And the grid system is the tool of our typesetting, he supports automatic alignment, automatic calculation of margins, flow layout and other advantages, simple and easy to use features make the grid layout as a necessary function of all the mainstream framework.

Let's briefly analyze how the grid layout works:

Container/row/column/grid spacing

A raster layout requires 3 parts--a container (container), a row, a column (or a grid). The container is used to determine the width, the rows need to be placed in the container, the rows are grouped into columns, and a set of columns are merged into a single row, and the columns are the elements that are actually displaying content, and our content is written in the column. Specifically, refer to

If the layout is only row and column, the adaptive layout also satisfies the requirement, and the raster layout is a clever place to provide the spacing between columns and columns, which we call the Gate spacing (gutter), the grid spacing exists only between columns and columns, and there should be no grid spacing between columns and containers. The presence of grid spacing makes it easier to set up layouts and align them without having to calculate padding ourselves.

Column width

A well-developed grid layout framework, which provides a class class that is similar to an adaptive layout for declaring column widths. First, the system divides the container into several parts, the total number is generally 3, 4 multiples, so as to facilitate typesetting. Then provide a number of delegate number classes, let the column to inherit, so that the column will occupy the total width of the container specified number of copies (span) . As shown in our example above, the total number of containers is 9, each column inherits a different part value, and the sum of the parts of all the columns in a row is also 9.

Grid Nesting

At the same time the grid system can be nested, that is, the column can also be used as a container, which can be declared a row, and then continue to declare the child column, this behavior we call raster nesting , such as:

line wrapping behavior for columns

Early grid system framework, columns and columns cannot be wrapped, that is, all columns in a row must be in the same row. But with the rise of the responsive layout, the columns in a row also need a newline behavior, and there is no display error after the line break, which we call the newline behavior of the column , such as. Because of the calculation of the gate spacing involved, not every raster system can support the "column wrapping Behavior". The line-wrapping behavior of a column is important for completing a responsive layout, and the most obvious example is that BOOTSTRAP3 's responsive functionality is far more powerful than BOOTSTRAP2 because the BOOTSTRAP3 raster supports the "column wrapping Behavior".

Calculation of column widths

According to the above analysis of the principle, we can see that how to calculate the grid spacing is the core of the grid system. Without the grid spacing, the grid layout becomes a normal adaptive layout, so how do you calculate the relationship between grid spacing, column widths, and line widths? As can be seen from the representation of the grid system, the number of grid spacing in a row equals the total number of copies minus one. If the width of the container is wide, the total number of copies is n, the width of the column spacing is gutter, the number of copies of the columns is span, and the column width is colwidth. Then there are:

Colwidth = (width + gutter)/n * span-gutter

This calculation is not complicated, but it is almost impossible to use CSS2 to automate calculations.

At the same time, the grid system has a difficult point, that is, how to control which column has the grid spacing, which column does not. The margin between the control element and the element in the CSS is margin, and there is no grid spacing between the grid and the container, so the margins calculation for each column is another challenge.

These two problems are difficult to solve directly with CSS2, but the use of some black technology can still solve these two problems. If the browser supports CSS3, it is also possible to use the CSS3 syntax to solve these two computational problems. According to several popular frameworks in the market, the author summarizes several methods to determine the column width and spacing of the grid:

1. Fixed container width method

This method is relatively simple, first of all the framework to determine the width of the container, so because the width of the container is fixed, you can calculate the width of the dequeue.

The determination of the spacing between the grids is also very simple, which is to let developers set their own. The framework sets a left or right margin in each column, and then defines a style class for the last column or column (such as ". First" or ". Last"), which the developer manually sets to remove the margin from the last column (or the first column).

If your browser supports CSS3, you can use CSS3 pseudo-class ": Last" and ": First" instead of ". Last" and ". First" for manual setup, which is more automated.

This method does not support column wrap behavior, because once a row is squeezed into the second row, the calculation of his grid spacing is problematic. Even with pseudo-classes to aid in the calculation of line spacing, it is still not possible to remove the extra grid spacing of the elements after line breaks.

Summary: The benefits of this approach are simple and good compatibility. The disadvantage is that only fixed container are supported, the applicability is poor, and the newline behavior of columns is not supported.

Representative Framework: Blueprint (Blueprint)

2. Row-by-one offset method

This method is very ingenious, using a very simple method to solve the column width and the problem of determining the grid spacing, the idea is that, because the number of grid spacing in a row equals the total number of parts minus one, if the Jeanxincquin equals the width of the container and a grid spacing, then the line can accommodate the number of rows spaced just equal to the total number It is also easy to calculate the column widths. Specifically, refer to

This method is ingenious in extending the width of the line and making the-margin method to offset the distance between a grid spacing, so that a more than a grid spacing does not affect the column display, so that the overall grid system calculation becomes very simple.

Another benefit of using this method is that he supports the "newline behavior of columns". As we said before, "newline behavior of columns" is an important feature of completing the grid's responsive layout, and using the row offset method, we do not need to control the behavior of the padding or margin of individual columns, which makes it possible for columns to display properly after a line break.

Of course, this method also has the disadvantage of how to determine the width of the line after the spread of the offset. Because the width of the offset line is exactly equal to the gate spacing plus the container width, it is difficult to use Calc without CSS3 and can only be calculated if the width of the fixed container is used.

Another problem is that the column widths are calculated using the padding and box-sizing properties, which makes it necessary to declare an element for layout, so that a single raster layout will declare two layers of elements to be used for layout, the semantics of the document will weaken, and once the grid is nested, Will produce more useless dom.

Represents the class library: The BOOTSTRAP2 raster is used in this way, because the BOOTSTRAP2 raster system container is fixed width, so the column width can be calculated by less beforehand, so that you can save columns by padding to calculate the column width of the steps, so that the grid system more concise.

3. Line bidirectional Offset method

This approach is currently the most popular method, equivalent to the use of a black technology to complete the arduous task. This method is very similar to the previous one-way offset method, except that the one-way migration method is difficult to calculate the actual row width, and the bidirectional migration method is to solve the problem.

The method is to offset half the grid spacing to the left and right, using the offset effect to automatically calculate the row width of the line, rather than specifying the line width, by the browser. We know that the width of block-level elements is characterized by that the width of the block-level elements fills the entire container by default, and if the element defines a margin, the width will be the width of the parent container width after the margin is removed. Even if the margin is negative, this method of calculation also applies, which is actually a hack, but it can be used to solve the problem of the calculation of the line width. Specific methods such as:

There are many popular frameworks that use this approach, but this method does not like the author, because this column has become a layout element, want to complete a layout, to generate more than three layers of elements, it is not worthwhile to do so. Let's take a look at the DOM structure of the BOOTSTRAP3 Chinese official website and look at his complex, maddening dom tree and you'll be disappointed with the method. But anyway, he's great. Solving two problems of grid system

Representative Class Library: Sister UI, BOOTSTRAP3, Foundation

4. Using Calc calculation method

The Calc attribute is one of the most fascinating properties in CSS3, and in the past Internet Explorer has provided a way to calculate the computable properties of Calc, but it has been shut down because of inefficiency and nonstandard syntax. The arrival of Calc has finally made it possible to calculate dimensions using numerical calculations in CSS.

The formulas we have previously analyzed are directly calculated using Calc, because Calc supports the calculation of percentages and units of values.

Of course, this is only a matter of resolving column widths, such as how to implement the "column wrap behavior" issue or not, so this method can be used with the "row one-way offset" method.

Of course, the biggest drawback of the Calc approach is compatibility, which is not supported by the low version of IE and many mobile browsers, so there is no mainstream framework that uses Calc to implement a raster system. However, after the major mainstream browsers support Calc, using Calc to develop a grid system will become mainstream, because this method is simpler than the hack method above.

5. Using Flex layouts

Some mobile frameworks are beginning to use Flex to provide a raster layout, but the flex layout is not different from the above-mentioned 4 forms, just the flex instead of the column float. However, in the vertical direction, Flex uses its own features to provide a set of vertical alignment patterns, which is a further complement to the grid system.

Representative Class Library: Ionic

Summarize

The implementation of grid layout is mainly the above, to understand the column of these methods, we can develop their own simple grid system, so that no longer rely on those large and stupid style framework, so that our project more firm clean.

On the grid layout of CSS