How to perfectly implement the grid layout with intervals on the page

Typical layout examples

As shown in the above picture, there is a certain gap in the middle of the squares, and the gap is fixed. How should the layout be made more perfect? ​​For example, when the layout is completed, an element can be quickly added to maintain the same layout. And when the second row appears, this layout will still not be affected. There is no need to modify too much content.

Set width to 100% and default width of block elements

Now let's talk about a problem here. The default width of a block element is to fill up one line, which can easily be confused with setting 100% for the element. In fact, although it is easy for us to think that the effects of these two methods are the same, because both methods occupy the entire parent element. But there are still big differences between them.
The main difference between them lies in what the width of the element changes with. If it is set to 100%, the width of the element will always be consistent with the parent element, and the margin set for the element will not affect the change of the element's width. Of course, only the width of the parent element will affect the width change of this element. If the width is not set, the block element occupies a single line, and the width of the element is affected not only by the parent element but also by the margin of the element.

The influence of setting margin on the width of a block element occupying a single line

Remember the following two rules

• When a margin (horizontally) is set for a block-level element that has no width set, the sum of the margin value (positive value) plus the width of the element is equal to the width of the parent element.
• When a margin (horizontally) is set for a block-level element that has no width set, the margin value (negative value) is exactly the distance that the width of the element exceeds the parent element.

As shown in the following figure:

Example of Rule 1:

Example of Rule 2:

Solution

Divide the average area

First, we divide the horizontal area into 5 equal parts 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, using margin-right to create spacing

<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 point we can imagine that the last element has an additional 10px spacing, so the last step is how to solve this spacing problem.

Stretch the parent element to hide the gap at the end

We add another element to the list so that the list stretches under its parent element, just hiding the excess 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 check the actual effect, and finally achieve the effect we showed at the beginning! This layout method has a lot of scalability. If there are 4 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 concludes this article on how to perfectly implement a grid layout with spaces between pages. For more information on grid layout with spaces between pages, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future!