Shulou(Shulou.com)06/03 Report--

In this issue, Xiaobian will bring you about how the grid system in CSS is. The article is rich in content and analyzed and described from a professional perspective. After reading this article, I hope you can gain something.

Speaking of grid systems, you may have seen the concept:

In this way, layout design is carried out through a fixed lattice structure. This is a design style and has been widely used in web design. This style is clear and neat, which can make the web page have a more friendly browsing experience.

And with the popularity of responsive design, grid systems began to take on a new meaning, that is, a way to implement responsive design.

Grid and Responsive

The point of responsiveness is to design multiple layouts for the same page, each for devices with different screen size. Generally, it feels like this:

As you can see, a page can be divided into multiple blocks to understand, and it is these blocks that together form the layout of the page. Responsive design can be achieved by adjusting the layout of these blocks according to different screen size situations. In addition, blocks tend to be horizontally distributed when the screen width is large, while blocks tend to be vertically stacked when the screen width is small.

Are these square blocks similar to the grid system? Yes, to make responsive design easier to use, there are many libraries of styles called grids.

Raster style libraries generally do this by dividing the page into columns of equal width, and then recommend that you create responsive page blocks with columns of equal width.

Although it seems like this idea, different raster style libraries have their own ideas in practice. Below, this article introduces a few representative raster style libraries, describing their brief principles and usage (the correct way to open them).

Grid in Bootstrap

Bootstrap puts its grid under CSS and calls it the Gird system. The default is 12 columns.

Containers, rows and columns

To understand the grid in Bootstrap, it is best to start by mastering the correct way to use it. There are two main points here.

The first point is the hierarchy between containers, rows, and columns. An example of correct writing is as follows:

CSS Code Copy content to clipboard

Bootstrap grids have two types of containers,.container (width of fixed pixel values) and.container-fluid (width of 100%), both of which are referred to here as containers. Note that row (.row) must be inside the container, and column (e.g.,.col-md-6) must be inside row. That is, containers, rows, and columns must maintain a certain hierarchical relationship for the grid system to work properly.

Why is this necessary? Looking at the styles of these elements, you can see that containers have horizontal padding of 15px, rows have negative horizontal margins of-15px, and columns have horizontal padding of 15px. These margins are intentional, interrelated, and thus define the hierarchy like gear meshes. The Subtle Magic Behind Why the Bootstrap 3 Grid Works.

If you want to nest rasters, the correct way to do this is to continue row directly within column and then continue column without the need for container:

CSS Code Copy content to clipboard

breakpoint type

The second point is the meaning and collocation of different breakpoint types.

The Bootstrap grid column corresponds to a class name such as.col-xx-y. y is a number indicating how many of the 12 columns the width of the element occupies. XX has only a few values to choose from, xs, sm, md, lg, which are breakpoint types.

In the design of Bootstrap grids, breakpoints mean that columns stack vertically when the viewport width is less than the breakpoint (default behavior of display: block), and horizontally when the viewport width is greater than or equal to the breakpoint (effect of float). The breakpoint pixel values increase in the order xs, sm, md, lg, where xs is extremely small, i.e. the viewport width is considered to be never less than xs breakpoint, and column will always float horizontally.

Sometimes you need to combine multiple breakpoint types to achieve a more detailed responsive design. What kind of interaction will there be between different breakpoint types?

Let's see how Bootstrap's sass source code defines a grid:

CSS Code Copy content to clipboard

@include make-grid-columns;

@include make-grid(xs);

@media (min-width: $screen-sm-min) {

@include make-grid(sm);

}

@media (min-width: $screen-md-min) {

@include make-grid(md);

}

@media (min-width: $screen-lg-min) {

@include make-grid(lg);

}

As you can see, min-width is used, and the larger the breakpoint pixel value, the later the corresponding code. So, if there are elements like this:

CSS Code Copy content to clipboard

1

2

3

4

Then they should have this effect:

Combined with the previous source code, it can be thought that in the above process of viewport width from small to large, first maintain the default vertical stack, and then exceed the sm breakpoint, sm style takes effect, into a row and two columns of typesetting, and then continue to exceed the lg breakpoint, lg style also takes effect, because lg style code is defined after sm, so it will overwrite sm style, resulting in a row and four columns of typesetting.

Therefore, combining multiple breakpoint types, you can introduce multiple breakpoint variations to make the response more detailed.

moderate use

Bootstrap grids, while powerful, should not be overused. For example, when you need an element that takes up a full row width, don't think about adding Bootstrap grids too, adding elements like.col-xs-12. In fact, you don't need any grid classes, all you need is a block element.

Rasters in Foundation

The Foundation grid is called Grid and is similar in design to the Bootstrap grid except for class names and structure. Foundation grids also default to 12 columns.

row and column

Analogous to the previous Bootstrap grid example, an example of a correct way to write a Foundation grid is as follows:

CSS Code Copy content to clipboard

The rows of the Foundation grid are represented by.row, while the columns consist of at least two class names: .columns or.column (both written identically, purely to support syntax preferences) to indicate that they are column elements, and.medium-6, which is used to indicate breakpoint types and corresponding widths. By default, the breakpoint types for Foundation grids are small, medium, and large in descending order, where small is similar to xs for Bootstrap grids, which also means horizontal at any screen size.

The Foundation grid has no containers, only rows and columns, and therefore appears simpler than the Bootstrap grid. Where row defines the maximum width (which can be thought of as assuming part of the container's functionality) and column defines the horizontal padding of 0.9375rem. If you want to nest, continue row within column and continue column.

Multiple breakpoint types are combined in the same way as Bootstrap grids. Note that Foundation rasters use em instead of px for breakpoint values, and correspondingly, their converted pixel values are different from Bootstrap rasters.

Block Grid

To complement the grid system, Foundation provides another grid called Block Grid. It's not something new beyond traditional grids, though, but just a way to apply sugar to specific grid scenarios.

Here is an example of a Block Grid:

CSS Code Copy content to clipboard

A specific combination of tags such as ul and li is required. In this example, as the screen width changes from small to large, the column elements will be arranged in a row of two columns, a row of three columns, and a row of four columns.

As you can see, Block Grid is also structured as rows and columns, but only requires a class name on a row. Compared to Foundation Grid, it does have some differences. On the one hand, the rows of Block Grid do not define a maximum width. Block Grid columns, on the other hand, must be of equal width (li doesn't require any class names, after all).

Toast grid

The two raster style libraries described above are derived from popular front-end frameworks and are not independent. Toast, introduced next in this article, is a stand-alone, thoughtful library of raster styles.

Special implementation

Why do you say you have a lot of ideas? See an example of how it is written correctly:

CSS Code Copy content to clipboard

Similarly, this is a two-column layout. As you can see, the Toast grid is also structured with rows (.grid) and columns (.grid__col). However, unlike the pattern, which always references 12, it can use a more intuitive class name of 1-of-2. In fact, 3-of-6, 6-of-12, etc. are also available here, and they are the same.

Of course, this isn't the most special thing about Toast. Now, think about how Bootstrap and Foundation grid system columns are arranged horizontally, since they are originally block elements.

Yes, it is float. But how does Toast do it? It has a unique idea and uses display: inline-block;. If you've read about this property, you should know that inline-block elements can have gaps between them. Toast builds on this selection by cleverly using negative margins (e.g. margin-right: -.25em;) to eliminate the effect of gaps on grid column horizontal alignment. After some testing and application, I can only say that this forced completion strategy deserves praise.

Non-Mobile First

In the previous Toast grid example, there are no words like md or medium that represent breakpoint types. This is because Toast uses the "default" style. In most cases, you only need to use class names like.grid__col--x-of-y. Toast has set breakpoints for this class (default 700px) below which display: block; is set, and above which display: inline-block; is set.

Surprisingly, unlike Bootstrap and Foundation's default mobile first principle of block (vertical stacking is more in line with small size screen typography requirements), Toast puts display: inline-block; outside the @media range as the default property. This should be just a style preference difference, personally, I still prefer mobile first design style.

For mobile first's implementation of responsive design, it is recommended to read Grid.

If you want to add multiple breakpoint variations, Toast does this:

CSS Code Copy content to clipboard

The effect of the above code is that the grid column below 480px is a block, occupying full width, between 481px and 700px is an inline-block, occupying 1/2 width, and above 701px is an inline-block, occupying 1/4 width.

Complements to Grid Systems

The source code of these raster style libraries described above uses the CSS precompilation tools such as Less and Sass, so the 12 columns, breakpoint values, column spacing, etc. are configurable, but in most cases the default is sufficient.

While grid style libraries are great, they are not the whole story of responsive design. Grid systems are just one of many ways to make the same app work well across devices of different screen size (such as using larger fonts on larger screens of larger size).

With the css grid system, we can easily create responsive page layouts. But in this process, understand how various raster style libraries work and use them correctly to make stable and reliable page structures.

The above is what the grid system in CSS shared by Xiaobian is. If there is a similar doubt, please refer to the above analysis for understanding. If you want to know more about it, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.