Principle of BOOSTRAP 3.0 Grid (GRID)

Time:2019-8-14

BOOTSTRAP CSS grid is a powerful tool for implementing responsive page design, but as far as its working principle is concerned, most of the time it should be a black box for developers. Few people want to know how it works behind it. Until you design your own pages that don’t meet a complex requirement, or design pages that don’t show up to your expectations. You’re really like a monk Zhang Er who can’t figure it out. Until I saw an article written by a foreign developer, it prompted some working principles of GRID in BOOTSTRAP 3.0 framework. Here is a brief summary for your reference.

Containers

  • The left inner margin of the container is 15px, as shown in the pink section below.
  • The width of the container depends dynamically on the screen width

Row

  • Columns should be included in row rows and can be added to up to 12 columns. It also acts as a wrapper because all columns float to the left, and there is no overlap between rows if the float is abnormal.
  • Each side of the row has a negative margin of 15px, as shown in blue in the following figure。 It just offsets the 15 PX left inner margin of the external container. Understanding this is critical to understanding how columns are arranged in subsequent columns. And when the layout of the page is abnormal. It allows columns in a row to start with a screen margin and calculate the left margin.
  • Don’t use lines outside containers, that won’t work.

Column

  • Columns now have an inner margin of 15px, which is shown in yellow. In this way, two points can be achieved:

    • Align the columns on both sides along the container (due to – 15px of rows)
    • There is always a 30 PX gap between columns and their contents
  • Don’t use columns out of doors. That won’t work.

Contents of columns

With the offset of the inner margins of the above rows and columns, the contents of each column, whether the column on the 2nd side or the column in the middle, are treated equally for the whole screen and can be controlled in the same row, that is, in the same row.15px +?? PX + 15px independent unitThis is the ingenuity of container > row > column margin settings.

nesting

You can create a new grid system in a column, remember that you can only use rows in a column, not containers:
Thus, the outer column has the same relationship with the inner row as the outermost container and row.
That is to say, at this point, the column acts the same way as the container, forming a single column.Recursive relation

Offset

The offset is well understood. It simply increases the left outer margin of the column by a number of unit lengths. The only thing to note is that when migrating the leftmost column, the starting position of the migration, as shown in the figure below, starts outside – 15px of the row. In fact, this is understandable, because the starting position of the outer row is – 15px, after all, the inner margin is also part of the row. When the middle column is offset, the effect is to split the previous column into two columns.

Push and pull

Why use push/pull? Flip the current layout according to the size of the screen.
Especially suitable for rearranging columns, when the screen changes from mobile design layout to desktop design, because it allows you to break the HTML default when the screen size changes:Top-down, left-to-rightThe layout.

It is particularly important to note that pull and push actually move columns rather than changing their left and right margins, as shown in the figure below, so that if a push/pull column, rather than its adjacent columns, overlaps with column contents.

Therefore, whenever you pull / push a column, the corresponding adjacent columns also need to do a complementary push / pull operation.


 
Understanding the above work principle of grid system, the difference of page layout in my project
They are often reasonably explained. If you still find it difficult to understand, remember to follow
container ->row ->column->row->columnThis way to organize the grid elements of the interface.