grid-auto-rows实现自适应网格图片相册排列效果代码-html代码-BFW代码库

grid-auto-rows实现自适应网格图片相册排列效果代码

代码语言：html

代码描述：grid-auto-rows实现自适应网格图片相册排列效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .gallery {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          grid-auto-rows: 150px 200px;
          gap: 1rem;
        }
        
        li:nth-child(2) {
          grid-row: span 2;
        }
        
        li:nth-child(4) {
          grid-row: span 3;
        }
        
        
        
        /*
            👇 Other than the layout
        */
        
        * {
          box-sizing: border-box;
        }
        
        body {  
          min-height: 100vh;
          padding: 2rem;  
          background-size: cover;
          font-family: 'Courgette', cursive;
          background-repeat: no-repeat;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700'%3E%3Cdefs%3E%3ClinearGradient gradientTransform='rotate(230, 0.5, 0.5)' x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='ffflux-gradient'%3E%3Cstop stop-color='%23FD6C13' stop-opacity='1' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23E63E00' stop-opacity='1' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3Cfilter id='ffflux-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.001 0.001' numOctaves='2' seed='221' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeGaussianBlur stdDeviation='0 0' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' edgeMode='duplicate' result='blur'%3E%3C/feGaussianBlur%3E%3CfeBlend mode='color-dodge' x='0%25' y='0%25' width='100%25' height='100%25' in='SourceGraphic' in2='blur' result='blend'%3E%3C/feBlend%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='url(%23ffflux-gradient)' filter='url(%23ffflux-filter)'%3E%3C/rect%3E%3C/svg%3E");  
        }
        
        * {
          box-sizing: border-box;
        }
        
        html {
          height: 100%;
          font: 24px/1.6 'Courgette', cursive;
        }
        
        body {  
          height: 100%;
        }
        
        ul {
          padding: 0;
          margin: 0;
          list-style-type: none;
        }
        
        li {
          min-width: 0;
          padding: 14px;
          background-co.........完整代码请登录后点击上方下载按钮下载查看