Example code for implementing the nine-grid layout of dynamic images with CSS

Precondition: content="width=750"

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">

The effect diagram is as follows:

Demand Analysis

Height and Width:

1 picture [width 320, height 320] [2 times the draft size]
For 2 images [width 332, height 332]
3 pictures, 4 pictures, 6 pictures, 7 pictures, 9 pictures [width 220, height 220]
For 5 or 8 images, [the 4th and 5th images have a width and height of 332], [the rest have a width and height of 220]

spacing:

When there are 2 images, the last image only has left margin.
When there are 3 sheets, the left and right margins of the second sheet
When there are 4 images, [the second image] and [the last image] only have margins in the left direction, and [3, 4] have margins in the top direction.
When there are 5 photos, the last photo only has left margin.
When there are 6 or 7 photos, the 2nd and 4th photos have left and right margins, and from the 4th photo onwards, the top has
When there are 8 photos, the left and right margins are for the 2nd and 4th photos. From the 4th photo onwards, there is margin on the top, and only on the left for the last photo.
When there are 9 sheets, [the 2nd, 4th, and 8th sheets] have left and right margins

Rounded Corner 10:

When there is 1 picture, [all] have rounded corners
2 pictures, 3 pictures - [1st picture upper left, lower left], [last picture upper right, lower right]
When there are 4 pictures, [1st picture, top left], [2nd picture, top right], [3rd picture, bottom left], [last picture, bottom right]
When there are 5 pictures, [1st picture, top left], [3rd picture, top right], [4th picture, bottom left], [last picture, bottom right]
When there are 6 pictures, [1st picture, top left], [3rd picture, top right], [4th picture, bottom left], [last picture, bottom right]
When there are 7 images, [1st image, upper left], [3rd image, upper right], [7th image, lower left, lower right]
When there are 8 pictures, [1st picture, top left], [3rd picture, top right], [7th picture, bottom left], [last picture, bottom right]
When there are 9 pictures, [1st picture, top left], [3rd picture, top right], [7th picture, bottom left], [last picture, bottom right]

Induction

We all learned the induction method of mathematics in middle school, which is to first find out whether a proposition is true when n=1, and then assume that it is true when n=k, and prove that it is also true when n=k+1, thereby proving that the proposition is true when n=k [k=any real number].

Code

<div class="grid-img-box">
    <van-image class='grid-img' v-for="value in data.photo" :key="value" fit="cover" :src="value" />
</div>

.grid-img{

  /**
  Width and height 1. 3n+1 and it is the second to last picture 2. 3n+1 and it is the last picture In both cases, the width and height of the picture should be 320;
      The remaining two cases are:
    3. When there is only one picture, the width and height are 320;
    4. For other cases and indexes, the width and height are both 220;
  */
  display: inline-block;
  width: 220px;
  height: 220px;
  &:only-child{
    width: 320px;
    height: 320px;
  }

  &:nth-child(3n+1):nth-last-child(2),
  &:nth-child(3n+2):last-child{
    width: 332px;
    height: 332px;
  }

  /**
  Spacing/Layout*/

  &:nth-child(3n+2){
    margin: 0 6px;
  }
  &:nth-child(n+4){
    margin-top: 6px;
  }

  &:first-child{
    border-top-left-radius: 10px;
  }

  &:last-child{
    margin-right: 0;
    border-bottom-right-radius: 10px;
  }

  /**
  Rounded Corners*/

  //Bottom left rounded corner: the first &:nth-child(3n+1) in the last row {
    &:last-child,
    &:nth-last-child(2),
    &:nth-last-child(3){
      border-bottom-left-radius: 10px;
    }
  }

  //Process four layouts //Increase the second margin to push the third one to the next line &:nth-child(2):nth-last-child(3){
    margin-right: 220px;
  }
  //Reset the second rounded corner &:nth-child(2):nth-last-child(3){
    border-top-right-radius: 10px;
  }

  //Reset the third margin and radius
  &:nth-child(3):nth-last-child(2){
    margin-top: 6px;
    margin-right: 6px;
    border-radius: 0 0 0 10px;
  }
  //Reset the fourth rounded corners &:nth-child(4):last-child{
     border-radius: 0 0 10px 0;
  }
}

Summarize

This is the end of this article about how to use CSS to implement a nine-grid layout for dynamic images. For more relevant CSS nine-grid layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!