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

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!

<<:  MySql cache query principle and cache monitoring and index monitoring introduction

>>:  The IE environment stipulates that the div height must be greater than the font height

Recommend

Native js to achieve seamless carousel effect

Native js realizes the carousel effect (seamless ...

Detailed explanation of this pointing problem in JavaScript

Preface The this pointer in JS has always been a ...

The difference between this.$router and this.$route in Vue and the push() method

The official document states: By injecting the ro...

Master the commonly used HTML tags for quoting content in web pages

Use blockquote for long citations, q for short ci...

MyBatis dynamic SQL comprehensive explanation

Table of contents Preface Dynamic SQL 1. Take a l...

Several ways to update batches in MySQL

Typically, we use the following SQL statement to ...

Example of usage of keep-alive component in Vue

Problem description (what is keep-alive) keep-ali...

Ubuntu installs multiple versions of CUDA and switches at any time

I will not introduce what CUDA is, but will direc...

Summary of Binlog usage of MySQL database (must read)

I won't go into details about how important b...

Mysql transaction concurrency problem solution

I encountered such a problem during development A...

Case analysis of several MySQL update operations

Table of contents Case Study Update account balan...

HTML framework_Powernode Java Academy

1. Framework A browser document window can only d...

How CSS affects the white screen time during initial loading

Rendering pipeline with external css files In the...

Implementation of Docker batch container orchestration

Introduction Dockerfile build run is a manual ope...