响应式布局，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
<h2>auto-fill (保留空轨道，适合日历/表格)</h2>
    <div class="container fill">
      <div class="item">卡片1</div>
      <div class="item">卡片2</div>
      <div class="item">卡片3</div>
    </div>

    <h2>auto-fit (拉伸填充，适合卡片/相册)</h2>
    <div class="container fit">
      <div class="item">卡片1</div>
      <div class="item">卡片2</div>
      <div class="item">卡片3</div>
    </div>
</body>

</html>

编辑器加载中

style.css

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

            
             .container {
            display: grid;
            gap: 16px; /* 设置网格间隙 */
        }
        /* auto-fill 效果 - 保留空位 */
        .container.fill {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            background-color: #ffe6e6; /* 浅红色背景，方便看容器范围 */
        }
        /* auto-fit 效果 - 拉伸填充 */
        .container.fit {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            background-color: #e6ffe6; /* 浅绿色背景 */
        }
        .item {
            background-color: rgb(141, 141, 255);
            height: 100px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

编辑器加载中

index.js

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

编辑器加载中

预览

控制台