html带坐标的网状表格,CSS+HTML<网格布局grid>

image.png

你可能会问网格布局可以干什么，我这里简单的了解了一下。发现类似计算器,键盘的排版都是可以用网格布局的，而且在项目开发中的一些商品布局或者文章布局等，也是可以用的。但是也要看你的熟练度了，我之前多用的是弹性布局display:flex，了解过网格布局 display:grid后，发现有些东西用起来还是用后者要方便很多，但是具体也没用过，不敢说有没有一些坑位～～

但是多多益善,知道的多，日后必能派上用场，这里为大家提供一些相关学习网格布局的网站，也可以直接通过我这边代码的注释，直接去理解

代码如下：

Document

* {

box-sizing: border-box;

}

body {

min-height: 100vh;

display: grid;

/* 1ch 等于一个 0 的宽度 */

/* 1ch = 1个英文 = 1个数字 */

/* 2ch = 1个中文 */

/* auto-fill;

如果容器大小不固定，项目大小固定，可以用auto-fill关键字自动填充； */

/* 列 自动填充列，每列为30个字符宽度 */

grid-template-columns: repeat(auto-fit, 30ch);

place-content: center;

/* 每个网格的间距为 5vh */

grid-gap: 5vh;

margin-left: auto;

margin-right: auto;

padding: 1rem;

}

#template {

background: #fff;

padding: 1rem;

border-radius: 7px;

box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13);

/* height: 25vh; */

/* 网格布局 */

display: grid;

/* grid-gap:20px 20px; */

/* row-gap和column-gap简写形式；行间距和列间距 */

grid-gap: 0.5rem;

}

.col {

background-color: #7B86F5;

border-radius: 4px;

display: grid;

place-items: center;

color: #fff;

font-size: 1.5rem;

}

.template-2col {

/* 重复写值很麻烦，可以用repeate函数；

repeat(次数，大小)；

例如：repeat(3,100px);　//重复3次，每次100px；

*/

/* 2列，每列为1等分 */

grid-template-columns: repeat(2, 1fr);

}

.template-3col {

/* 3列，每列为1等分 */

grid-template-columns: repeat(3, 1fr);

}

.template-4col {

/* 2行 每行1等分/2列 每列1等分 */

grid-template: repeat(2, 1fr)/repeat(2, 1fr);

}

.template-5col {

/* 区域划分 2行2列 */

grid-template: "sidebar mainA""sidebar mainB";

/* 1列最小为100px最大为1等分 2列为1等分*/

grid-template-columns: minmax(100px, 1fr) 1fr;

}

.template-5col .left {

overflow: hidden;

/* 区域划分 left占 sidebar 位*/

grid-area: sidebar;

}

.template-5col .left img {

width: 100%;

height: 100%;

object-fit: cover;

}

.template-6col {

grid-template: "mainA sidebar""mainB sidebar";

}

.template-6col .right {

grid-area: sidebar;

}

.template-7col {

/* 3行 每行1等分/3列 每列1等分 */

grid-template: repeat(3, 1fr)/repeat(3, 1fr);

}

.template-8col {

/* 3行 每行1等分/3列 每列1等分 */

grid-template: repeat(3, 1fr)/repeat(3, 1fr);

/* 网格排列方式 默认row:水平排列 column:垂直排列 */

grid-auto-flow: column;

}

.template-9col {

grid-template: repeat(3, 1fr)/repeat(3, 1fr);

}

.template-9col .col:nth-child(1) {

/* 从第1行和第1列开始，跨越1行3列 */

grid-area: 1/1/span 1/span 3;

}

.template-9col .col:nth-child(3) {

/* 从第2行和第2列开始，跨越2行2列 */

grid-area: 2/2/span 2/span 2;

}

.template-9col .col:nth-child(5) {

/* 从第1行和第1列开始，跨越1行3列 */

grid-area: 4/1/span 2/span 1;

}

1

2

1

2

1

2

3

1

2

3

4

1

2

3

1

2

3

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9