How to achieve the perfect grid layout with spacing in the page

Time:2022-1-2

Typical layout example

As shown in the above figure, there is a certain gap in the middle of the grid, and the gap is fixed. How can the layout be more perfect? For example, we should ensure that when the layout is completed, we can quickly add an element and still maintain such a layout. And when the second line appears, such a layout can still be unaffected. Without modifying too much content.

Set the width to 100% and the default width of the block element

A problem here is that the width of the block element is full by default. We can easily confuse it with setting 100% for the element. In fact, although these two methods are easy to make us think that their effects are the same, because these two methods are full of parent elements. But there are still great differences between them.
The main difference between them lies in what the width of an element changes with. If 100% is set, the width of the element is always consistent with that of the parent element, and the margin set for the element will not affect the change of the width of the element. Of course, only the width of the parent element will affect the width change of the element. If the width is not set, the block element is exclusive. The width of the element is affected not only by the parent element, but also by the margin of the element.

The width of a block element that is exclusive to a row is set to the effect of margin

Remember the following two rules

  • When margin (horizontal direction) is set for a block level element without width, the sum of margin value (positive value) plus the width of the modified element is equal to the width of the parent element
  • When margin (horizontal direction) is set for a block level element without width, the margin value (negative value) is just the distance that the width of the element exceeds the parent element

As shown in the figure below:

Rule 1 example:

Example of rule 2:

Solution

Divide average area

First, in a horizontal area, we divide 5 parts equally and arrange them horizontally. Then we use floating horizontal arrangement and set each element to 20% on average.


<ul class="list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>



.list{
 overflow: hidden;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}

Place content in each area and separate it with margin right


<ul class="list">
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
  <li>
   <div class="content"></div>
  </li>
</ul>

.list{
 overflow: hidden;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}
.content{
 margin-right: 10px;
}

At this time, we can imagine that the last element has an additional 10px spacing, so the last step is how to solve the spacing problem.

Stretch the parent element to hide the gap at the tail

We set another element for the list and let the list stretch under its parent element to just hide the redundant part.


<div class="wrapper">
  <ul class="list">
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
    <li>
      <div class="content"></div>
    </li>
  </ul>
</div>

.wrapper{
 width: 800px;
    overflow: hidden;
}
.list{
 overflow: hidden;
    margin-right: -10px;
}
.list li{
 width: 20%;
    height: 100px;
    float: left;
}
.content{
 margin-right: 10px;
}

You can view the actual effect and finally realize the effect shown at the beginning! And this layout has many expansibility. If there are four elements in a row, you only need to set the width of each element to 25% and subtract one from the number of elements.

This is the end of this article on how to perfect the implementation of the space grid layout on the page. For more information about the space grid layout, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!