CSS grid布局处理不规则的布局效果图思路创建 6 列实现区域补充知识 CSS 自定义变量var var

效果图

思路

创建 6 列实现
区域

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* ul {
      display: grid;
      list-style: none;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
    }

    li {
      min-height: 100px;
      background: red;

      &:nth-child(1) {
        grid-column: 1 / span 2;
      }

      &:nth-child(2) {
        grid-column: 3 / span 2;
      }

      &:nth-child(3) {
        grid-column: 5 / span 2;
      }

      &:nth-child(4) {
        grid-column: 1 / span 3;
      }

      &:nth-child(5) {
        grid-column: 4 / span 3;
      }
    } */
	ul {
	  display: grid;
	  grid-template-columns: repeat(6, minmax(0, 1fr));
	  gap:10px;
	  grid-template-areas:
	    "item1 item1 item2 item2 item3 item3"
	    "item4 item4 item4 item5 item5 item5";
	  
	}
	
	li {
	  min-height: 100px;
	  background: red;
	  grid-area: var(--name);
	}
  </style>
</head>

<body>
  <!-- <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul> -->
  <ul>
    <li style="--name:item1"></li>
    <li style="--name:item2"></li>
    <li style="--name:item3"></li>
    <li style="--name:item4"></li>
    <li style="--name:item5"></li>
  </ul>
</body>

</html>

补充知识 CSS 自定义变量var

var

参考地址

阮一峰网络日志

CSS grid布局 处理不规则的布局

效果图

思路

补充知识 CSS 自定义变量var

参考地址

CSS grid布局处理不规则的布局