前端网格布局display: grid；
display: grid; 块级网格 （常用）
display: inline-grid; 行内块级网格 （一般不用）
HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。
span标签是一个行内元素本来不能设置宽高，加上网格元素后就可以设置宽高，变成一个块元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 200px;height: 200px;background: red;display: grid;/* 块级网格 *//* display: inline-grid; *//* 行内块级网格 */}</style>
</head>
<body><div></div><span>111111111</span><span class="box">2222222222</span><span>333333333</span></body>
</html>