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

Introduction to general_log log knowledge points in MySQL

The following operation demonstrations are all ba...

Analysis and solution of the problem that MySQL instance cannot be started

Table of contents Preface Scenario Analysis Summa...

Implementation and optimization of MySql subquery IN

Table of contents Why is IN slow? Which is faster...

Vue custom components use event modifiers to step on the pit record

Preface Today, when I was using a self-written co...

503 service unavailable error solution explanation

1. When you open the web page, 503 service unavai...

Disable IE Image Toolbar

I just tried it on IE6, and it does show the toolb...

mysql5.7.20 installation and configuration method graphic tutorial (mac)

MySQL 5.7.20 installation and configuration metho...

MySQL graphical management tool Navicat installation steps

Table of contents Preface 1. Arrange the installa...

Configure selenium environment based on linux and implement operation

1. Using Selenium in Linux 1. Install Chrome Inst...

A graphic tutorial on how to install MySQL in Windows

Abstract: This article mainly explains how to ins...

Implementing access control and connection restriction based on Nginx

Preface Nginx 's built-in module supports lim...

Docker starts MySQL configuration implementation process

Table of contents Actual combat process Let's...

Detailed explanation of GaussDB for MySQL performance optimization

Table of contents background Inspiration comes fr...

Summary of various methods for Vue to achieve dynamic styles

Table of contents 1. Ternary operator judgment 2....