A novice tutorial to help you easily master grid

Editor's note: This is a simple introductory tutorial, suitable for the grid also has a smattering of students to read, the basic knowledge of the front to understand, the next grid side sidebar can also let many designers learn to avoid stepping on thunder, not long articles are dry goods, study under.

@Akane_Lee: I stepped on a ray Orz who didn't learn the Grid well, hereby take out the notes. Before the use of the "grid: PS Plug-in" a simple mention of the use of grid, but not clear enough, later used to encounter a problem: If your Web page has a sidebar, how to design to meet the grid?

Specification diagram

For reference, the Grid is divided into several blocks, Chenghong, green, blue and transparent. This figure is a demonstration of 1000px.

Column column

Red, 60px

The part of the picture and video. The data for all the main content will be placed at the beginning of this grid.

Gutter Clearance

Transparent, 20px

The spacing between the columns and the columns.

Grid padding left White

Green, 30px

The spacing between the main text and the edges, and the portion that is still displayed when the screen is minimized. This is what I stepped on, and then I explained why.

Blue

This block is not in Grid computing, but it still needs to be designed! When the screen continues to stretch, such as a large wide screen, the entire main content area can also be pulled up, text pictures will be distorted. When the Web size is wide to a certain extent, there are only blue blocks that continue to be extended around. The width of the entire page is equal to the bar + gap + White, blue block is not counted! (In other words, when the Web size is narrow to a certain extent, the block disappears completely.) )

The above is a simple description of the grid.

The situation encountered

1. Extend the range, does not calculate in the grid number.

2. White leaves

3. Column

4. Clearance

The image above shows that this is a Web page with "sidebar", while the starting point of the sidebar remains white. This is a problematic approach, and leaving White is part of what we still want to see at the minimum screen.

If you start with the left side bar

If you start from white to side sidebar, "1 when the screen shrinks. The scope of the extension "will completely disappear, the screen directly from the"2. White "began. You can see both sides of the visual slow charge missing. Unless you deliberately want this effect, you usually don't cut it so directly.

What we want is to leave a bit of gray on both sides of the left and right when the vision is slow.

Leave a little gray on the left and right side to have the view, content concentration in the main content area effect.

Modify

It's the same grid, but it's adjusted a little bit. Remember, even according to the design of the Grid layout, CSS has padding this function.

1. Make sure that the minimum screen will still appear when the white areas is in the bottom of the ash.

2. Use Padding to indent the sidebar.

3. This allows you to see the starting point of the right main content area exactly aligned to the bar.

4. The end of the main content area is also in the column, using Padding to empty out a little white edge.

5. So there is room on the right side of the gray, all the main content in the field.

"All the main content is in the field" is a very important concept of Grid System, figuring out the role of white to design a responsive Web that everyone can do well. F2E (front-end engineer) will thank you.

Mobile

Incidentally, this is a Mobile setting.