Front-end development often encounter grid layout, there are many ways to achieve the grid, today through a Demo to show a variety of grid implementation

Container and in-grid project configuration

Set the width of the container to be fixed at 290 and the space between items to be 10px, left, right, up, down, and 5 items per row. The style sheet for items is as follows

.item {
  width: 50px;
  height: 50px;
  background-color: #fca0a3;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
Copy the code

Flex layout

Flex can be wrapped by setting flex-warp: wrap

justify-content: space-between

The container is filled with the length of the container spindle, and the space between items is equal, which naturally reminds us of space-between. It only needs to be set in the container, and the space between the upper and lower items needs to be set manually:

.flex-container-1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.item {
  width: 50px;
  height: 50px;
  background-color: #fca0a3;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  /* Set the upper and lower interval */
  margin-bottom: 10px;
}
Copy the code
<div class="flex-container-1">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
Copy the code

This looks fine, but the result is incorrect, and the result is as follows:

Space-between has a rule that it takes up the length of the main axis of the container. In this case, the main axis is the X axis, which is also the width. First it takes up the width, and then the items in the container are equally spaced, so it looks like this. This also lets you know that the last line of the page is always an exception when the last line is either not 1 item or full

justify-content: flex-start

If you want the last line to be sorted normally, you can only use flex-start. In this case, the left and right margins of the project should be set first, but only margin-right is set: 10px doesn’t work because the container’s main axis is only 290px, which is too long. In addition, if you change the container’s main axis to fit one row, the last one is still an exception, so you need to process the last item in the row, and you need to use the nTH-of-type () pseudo-class

.flex-container-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.item {
  width: 50px;
  height: 50px;
  background-color: #fca0a3;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  margin-bottom: 10px;
  /* Set the left and right interval */
  margin-right: 10px;
}
/* Processes the last element of each line */
.item:nth-of-type(5n) {
  margin-right: 0;
}
Copy the code

After this modification, you can see the desired effect, as shown below

This is probably how grid layouts are implemented. Flex has the advantage of being compatible, common and important in flutter

The Grid layout

Should Gird layout not be considered as a priority for grid layout, or should Gird layout be considered as a priority for grid layout, or should Gird layout be considered as a priority for grid layout, or should Gird layout be considered as a priority for grid layout, or should Gird layout be considered as a priority for grid layout, or should Gird layout be considered as a priority for grid layout, or should Gird layout be considered as a priority for grid layout, or should Gird layout be considered as a priority for grid layout? Set it to 5 columns, and then set the spacing between the rows and columns. You don’t need to set margin or padding between items

.grid-container {
  display: grid;
  /* This can be done in any of the following five ways
  grid-template-columns: repeat(5.1fr);
  /* grid-template-columns: repeat(5, 50px); * /
  /* grid-template-columns: 50px 50px 50px 50px 50px; * /
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; * /
  /* grid-template-columns: repeat(auto-fill, 50px); * /
  /* Sets up, down, and left/right spacing */
  row-gap: 10px;
  column-gap: 10px;
}
Copy the code

This layout for Grid layout is simply a piece of work, Grid layout can achieve many effects, you can refer to Ruan Yifeng’s blog, Grid layout is very convenient for daily use, but if the page needs to be compatible with older mobile devices, it is best not to use, compatibility problems are very big.

The traditional layout

Traditional layout implementation is also very simple, you can refer to this layout implementation, with three lines, interval implementation can set the right margin, and then the last line of processing, can also refer to the implementation of ant-Design grid, all roads lead to Rome