CSS code for arranging photos in Moments

First, you can open Moments and observe several layouts with different numbers of pictures, or refer to the example below;

It can be found that except for 1 picture and 4 pictures, all other pictures are arranged in a row and three columns;

Assume there is the following HTML code, where imgList is an array of image addresses;

<ul>
    <li v-for="(item, index) in imgList" :key=index >
        <img :src="item">
    </li>
</ul>

1. First, we use flex to achieve a normal three-column layout:

Set to wrap, each element occupies 1/3 or the specified width, except for the last element (3n) of each line, which sets margin-right and reserves space;

ul{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
li{
  width: 32%; 
  height: 100px;
  margin-top: 5px;
}
.list:not(:nth-child(3n)) {
  margin-right: 2%;
}

2. If there is only one picture, just use the CSS selector to determine that it is a picture and change the picture size;

Selector logic: When the element is the last element && the first element, it can be determined that there is only one element: set its style separately to overwrite the original style

ul li:nth-last-child(1):first-child{
  width: 200px;
  height: 200px;
}

3. For the case of four pictures, the pictures need to be laid out in two rows and two columns: Here, you need to add margin-right to the second picture in this case to change three columns into two columns:

Selector logic: When the element is the fourth to last && the first element, it is judged that there are four elements in total.
Then select the 2nth element of the same level and add the margin-right attribute to it;

ul li:nth-last-child(4):first-child ~ li:nth-child(2n){
  margin-right: 32%;
}

Before that, you need to restore the interval of the third element, or similar to the Moments, the four photos are not displayed in intervals. If necessary, you can also set other attributes, as follows: (This attribute must be before the previous attribute)

ul li:nth-last-child(4):first-child , ul li:nth-last-child(4):first-child ~ li{
  width: 50%;
  margin-right: 0;
}

Summarize

This is the end of this article about how to use CSS to arrange photos in Moments. For more information about CSS picture arrangement and layout, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!