Precondition: <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] spacing: When there are 2 images, the last image only has left margin. Rounded Corner 10: When there is 1 picture, [all] have rounded corners 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
Native js realizes the carousel effect (seamless ...
Preface The this pointer in JS has always been a ...
The official document states: By injecting the ro...
Use blockquote for long citations, q for short ci...
Table of contents Preface Dynamic SQL 1. Take a l...
Typically, we use the following SQL statement to ...
Problem description (what is keep-alive) keep-ali...
I will not introduce what CUDA is, but will direc...
I won't go into details about how important b...
I encountered such a problem during development A...
Table of contents Case Study Update account balan...
1. Framework A browser document window can only d...
Rendering pipeline with external css files In the...
Table of contents 1. MySQL trigger creation: 1. M...
Introduction Dockerfile build run is a manual ope...