Day 4 of the August Challenge, see details: August Challenge

A lot of people think that layout is all about the UI, not the front end. In fact, when we coding, we cannot simply pile up rough elements, the code will be terrible. For example, now that we have a rendering of the layout, how do we conceive the layout, regardless of the content:

As can be seen from the figure, 2, 4, 5 and 7 are special compared with others. The grid is not so friendly if you use the UI framework. If you use Flex layout, but you need to give each column a height, it is also relatively cumbersome. It’s the turn of the mightyGrid 2d layoutCome on stage. Let’s start with a grid of three rows and three columns in a large container. The first and third columns have the same width and the first and third rows have the same height. The code:

.gridContainer {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 28% 37% 28%;
        column-gap: 2%;
        row-gap: 3%;
        }
Copy the code

Display: Grid gives the constraints and tells the browser what the layout is going to be. Grid-template-columns set the width of the columns. You can use % or fr, where the width in the middle is twice the width on both sides

Grid-template-rows is a given row height, column-gap row spacing, and row-gap column spacing

The first step is complete, but as we can see in the renderings, 2 and 5 should be combined into one area. This is also simple, and the basic mathematics of the first grade is enough:

.item2 {
          grid-column-start: 2; // The second line of the grid line starts
          grid-column-end: 3;  // The grid line ends with the third line
          grid-row-start: 1;   // The grid column starts at the first root
          grid-row-end: 3;     // The third grid column ends
        }
Copy the code

One thing we have to be careful about, because we’re adding the spacing between the rows and the columns, is that the adjacent lines are one.

Complete code:

This is the specific content of the project, the details see nguyen, the interpretation of the great god reference site: www.ruanyifeng.com/blog/2019/0…

(Just a reminder, I don’t know if you can see the difference between the final renderings and the code 😁)