CSS网格，HTML代码在线实时编辑、实时预览

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
28
29
30
31
32
33

            
            <!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>
  <div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

  <div class="grid-container2">
<div class="item1">页头</div>
<div class="item2">菜单</div>
<div class="item3">主体</div>
<div class="item4">右侧边栏</div>
<div class="item5">页脚</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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

            
            .grid-container {
  display: grid;
  /* grid-template-columns: auto auto auto; */
  /* grid-template-columns: 100px 200px 100px; */
  grid-template-columns: 1fr 2fr 2fr;/* 可用空间百分比占用 */
  grid-template-rows: 50px 50px 100px;
  background-color: #2196F3;
  padding: 10px;
  //grid-gap: 10px;/* 网格间隙 */
  /* 也可以分别设置行间隔和列间隔 */
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 10px;
font-size: 20px;
text-align: center;
}

.grid-container2 {
display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 300px 100px;
  background-color: orange;
  gap: 10px;
}

.item1 {
  grid-column: 1 / span 4;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.item2 {
  grid-row: 2 / span 2;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.item3 {
  grid-column: 2 / span 2;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.item4 {
  grid-column: 4;
  grid-row: 2;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

.item5 {
  grid-column: 2 / span 3;
  grid-row: 3;
  border: 1px solid rgba(0, 0, 0, 0.8);
}

编辑器加载中

index.js

            
                1

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

编辑器加载中