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'.........完整代码请登录后点击上方下载按钮下载查看