用CSS的Grid布局画飞行棋盘

1. Grid布局简单介绍

网格布局Grid，可以将网页划分成一个个网格，组合任意不同的布局。采用容器(container)定义项目(item)分布，项目(item)可设置自身行列高度。

     
1
     
2
     
3
     
4

// 定义一个2*2的网格，上下左右间距为2px
.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 2px 2px;
    width: 100px;
    height: 100px;
}
// 定义项目行列占比都是1
.item {
    grid-area: span 1 / span 1; // 占1行 / 占1列
}

效果图

2. Grid布局画飞行棋盘

I. 分析

飞行棋盘布局分析

如图，横轴上长度可看作由9个长方形及4个正方形组成(纵轴也是)，假设长方形宽高为2 : 3，正方形宽高为3，可将飞行棋盘看作是30 * 30的网格进行布局。

• 4个角的大正方形占7行7列 ( [7, 7] )
• 中间的正方形占4行4列 ( [4, 4] )
• 中间通道的正方形占2行2列 ( [2, 2] )
• 其余长方形占2行3列 ( [2, 3] )
• 其余正方形占3行3列 ( [3, 3] )
• 虚线框为白色透明块 ( [4, 4], [1, 4], [3, 5], [1, 4] )

各行列的项目占比矩阵如下

[7, 7], [3, 3], [3, 2], [3, 2], [3, 2], [3, 2], [3, 2], [3, 3], [7, 7]
[2, 3], [4, 4], [2, 2], [4, 4], [2, 3]
[2, 3], [2, 2], [2, 3]
[3, 3], [3, 2], [3, 2], [3, 3], [2, 4], [2, 2], [2, 4], [3, 3], [3, 2], [3, 2], [3, 3]
[1, 4], [2, 2], [1, 4]
[2, 3], [4, 4], [4, 2], [3, 5], [3, 5], [4, 2], [4, 4], [2, 3]
[2, 2]
[2, 3], [2, 3]
[1, 4], [4, 4], [1, 4]
[2, 3], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 2], [2, 3]
[2, 3], [4, 4], [4, 2], [1, 4], [1, 4], [4, 2], [4, 4], [2, 3]
[3, 5], [2, 2], [3, 5]
[2, 3], [2, 3]
[2, 2]
[3, 3], [3, 2], [3, 2], [3, 3], [1, 4], [1, 4], [3, 3], [3, 2], [3, 2], [3, 3]
[2, 4], [2, 2], [2, 4]
[7, 7], [2, 3], [4, 4], [2, 2], [4, 4], [2, 3], [7, 7]
[2, 3], [2, 2], [2, 3]
[3, 3], [3, 2], [3, 2], [3, 2], [3, 2], [3, 2], [3, 3]

II. 实现

1. 定义一个30 * 30的网格容器；
2. 按顺序设置每个项目的行列，顺序从左往右，自上而下；
3. 设置每个项目的背景颜色

// 定义一个30 * 30的网格，上下左右间距为2px，宽高都为浏览器宽度
.grid {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(30, 1fr);
    grid-gap: 2px 2px;
    width: 100%;
    height: 100vw;
}

// 设置每个项目的行列及颜色，颜色定义见下文

// 颜色定义
.bg-yellow {
    background-color: #ffc66e;
}
.bg-blue {
    background-color: #70dfdf;
}
.bg-red {
    background-color: #ff8da3;
}
.bg-green {
    background-color: #80d870;
}
// 对角颜色
.bg-green-bottom-right {
    background-image: linear-gradient(-45deg, #80d870 0%, #80d870 50%, transparent 50%, transparent 100%);
}
.bg-yellow-bottom-left {
    background-image: linear-gradient(45deg, #ffc66e 0%, #ffc66e 50%, transparent 50%, transparent 100%);
}

第一行效果图

按照矩阵的数据继续绘制

飞行棋盘效果图

3. 总结

Grid布局可以通过设置网格的行列数进行灵活布局，绘制各种有趣的图案棋盘。