Grid layout frequently asked interview questions

Grid The benefits of grid layout are no less than Flex, It can quickly divide the layout into desired modules , and flex The opening method is the same , A word of display：grid You can start

Here we will directly introduce the portal , You can read teacher Ruan Yifeng's blog , Not only Flex The flexible layout is well written ,Grid The grid layout is also very Nice

CSS Grid Grid layout tutorial - Ruan Yifeng's Weblog (ruanyifeng.com)

Today, I want to share with you a few words about Grid Frequent high-frequency interview questions

1 Grid How to achieve something similar to flex：row-reverse The effect of

adopt grid-auto-flow and direction

grid-auto-flow：row|column|dense This attribute specifies that grid How to sort the elements inside the container of the layout

direction：rt|Irt Specify text The horizontal direction of the table column

2. Box trisection

1.Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr（fr=fraction）;
  gap: 1rem;
}

[ Failed to transfer the external chain picture , The origin station may have anti-theft chain mechanism , It is suggested to save the pictures and upload them directly (img-MthSqgDx-1657715104306)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8612c42a8a024db884b28f9dcf36197a~tplv-k3u1fbpfcp-watermark.image?)]

According to the latest standards , Of the above three property names grid- The prefix has been removed ,grid-column-gap and grid-row-gap It's written in column-gap and row-gap,grid-gap It's written in gap.

2.flex

.flex-container {
  display: flex;
  flex-wrap: wrap;
  // gap: 1rem;
​
  .item {
    flex: 0 0 calc(100% / 3);
  }
}

3.Grid The advantages of

Flex The layout is the axis layout , Only... Can be specified " project " For the position of the axis , It can be seen as a one-dimensional layout .

Grid The layout is to divide the container into " That's ok " and " Column ", Generate cells , Then designate " Where the project is " Cells of , It can be seen as a two-dimensional layout . Grid The layout is much better than Flex Strong layout

Refer to the blog from Shanyue , Really a good helper for interview
【Q506】Grid The layout is similar to how to realize flex: row-reverse | css High frequency interview questions | Interview questions for large factories one a day (shanyue.tech)
Reprint ： Welcome to reprint , But without the author's consent , This statement must be retained ;

If you have questions, you can kick me in the comment area