CSS中的栅格布局

在写前端项目的时候，我之前一直习惯使用flex布局，flex布局写起来比较随心，几乎可以实现任意形式的页面布局。不过自从B占看到某位大佬的grid布局后，发现布局居然还可以这么玩，正好自己在写一个vue3的项目，需要写几个大屏展示方案，用栅格布局实现了一下，发现真香

看一下最后的实现效果，真实效果比这个好很多，因为有数据和地图，但这里主要记录怎么使用栅格布局，所以我只将精髓

页面分上中下三部分，整体使用flex布局，排列方向是column。上面是标题，中间是数据看板，下面是展示的核心内容

上面也是用的flex布局，中间和下面都是grid布局

先看下完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网格布局</title><style>.main-screen {display: flex;flex-direction: column;align-items: center;justify-content: center;}.header {width: 100%;height: 80px;background-color: #030829;display: flex;align-items: center;justify-content: space-between;}.time {color: #fff;margin-left: 20px;}.tip {color: #fff;margin-right: 20px;display: flex;justify-content: center;align-items: center;}.header-title {width: 30%;text-align: center;color: #FFFFff;background-size: 100% 100%;height: 80px;font-family: "微软雅黑" !important;}h2 {margin-top: 16px !important;font-size: 28px !important;}.content {width: 100%;background-color: #081832;padding-top: 10px;padding-bottom: 5px;height: 950px;display: flex;flex-direction: column;}.numeric {padding: 10px;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 30px;// background-color: #034c6a;height: 15%;width: 100%;}.chart {height: 85%;width: 100%;// border: 1px solid #fff;display: grid;grid-template-columns: repeat(10, 1fr);gap: 10px;padding: 10px;}.box {box-shadow: -10px 0px 15px #034c6a inset,0px -10px 15px #034c6a inset,10px 0px 15px #034c6a inset,0px 10px 15px #034c6a inset;border: 1px solid #034c6a;box-sizing: border-box;margin-top: 10px;position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;}.title {background-color: #034c6a;border-radius: 18px;position: absolute;height: 35px;width: 60%;top: -15px;color: #ffffff;font-weight: bold;font-size: 16px;left: 20%;line-height: 35px;text-align: center;}.top-left {grid-row: 1/4;grid-column: 1/3;}.bottom-left {grid-row: 4/7;grid-column: 1/3;}.middle-map-left {grid-row: 1/5;grid-column: 3/6;}.middle-map-right {grid-row: 1/5;grid-column: 6/9;}.middle-bottom-left {grid-row: 5/7;grid-column: 3/5;}.middle-bottom-bottom {grid-row: 5/7;grid-column: 5/7;}.middle-bottom-right {grid-row: 5/7;grid-column: 7/9;}.right-top {grid-row: 1/4;grid-column: 9/11;}.right-bottom {grid-row: 4/7;grid-column: 9/11;}.numeric-box {background-color: #034c6a;border-radius: 8px;height: 100%;display: flex;justify-content: space-around;align-items: center;}</style>
</head>
<body style="margin: 0; padding: 0;"><div class="main-screen"><div class="header"><div class="time">2023-10-27 16:59:59</div><div class="header-title"><h2><strong>无锡市今日数据看板</strong></h2></div><div class="tip"><span>提示：数据每小时更新</span></div></div><div class="content"><div class="numeric"><div class="numeric-box"></div><div class="numeric-box"></div><div class="numeric-box"></div></div><div class="chart"><div class="box top-left"><div class="title">江阴市</div></div><div class="box bottom-left"><div class="title">宜兴市</div></div><div class="box middle-map-left"><div class="title">今日地图</div></div><div class="box middle-map-right"><div class="title">当前地图</div></div><div class="box middle-bottom-left"><div class="title">滨湖区</div></div><div class="box middle-bottom-bottom"><div class="title">新吴区</div></div><div class="box middle-bottom-right"><div class="title">梁溪区</div></div><div class="box right-top"><div class="title">锡山区</div></div><div class="box right-bottom"><div class="title">惠山区</div></div></div></div></div>
</body>
</html>

先看中间的三个数据展示面板的网格布局，样式代码如下

    .numeric {padding: 10px;display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 30px;// background-color: #034c6a;height: 15%;width: 100%;}.numeric-box {background-color: #034c6a;border-radius: 8px;height: 100%;display: flex;justify-content: space-around;align-items: center;}

主要看上面的numeric，这是一个很基础的网格布局，核心就是设置grid-template-columns，因为有3列，所以写三个1fr就行了，然后就是样式的美化，gap是样式之间的间隔

下面来看比较复杂的grid布局

下面那部分内容，我要展示7个小的方块，2个大一点的方块，大的方块要放在中间，为了布局好看点，我进行了如下的设计：

每个方块，都有一个box属性，就是设置背景颜色和阴影的。其他的属性直接在图上标注了。

那现在的重点就是如何用栅格布局来设计这种响应式的大屏页面了，根据代码：

首先看容器的样式

    .chart {height: 85%;width: 100%;// border: 1px solid #fff;display: grid;grid-template-columns: repeat(10, 1fr);gap: 10px;padding: 10px;}

关键的代码就是设置了grid-template-columns: repeat(10, 1fr);意思是横向上重复10列，也就是有10个网格，这个10如何而来，自然是根据上面的设计，从B到K正好10格。

接下来看每个方块是怎么设置的

 	.top-left {grid-row: 1/4;grid-column: 1/3;}.bottom-left {grid-row: 4/7;grid-column: 1/3;}.middle-map-left {grid-row: 1/5;grid-column: 3/6;}.middle-map-right {grid-row: 1/5;grid-column: 6/9;}.middle-bottom-left {grid-row: 5/7;grid-column: 3/5;}.middle-bottom-bottom {grid-row: 5/7;grid-column: 5/7;}.middle-bottom-right {grid-row: 5/7;grid-column: 7/9;}.right-top {grid-row: 1/4;grid-column: 9/11;}.right-bottom {grid-row: 4/7;grid-column: 9/11;}