通过gird布局实现div的响应式分布排列
目标：实现对于固定宽度的div盒子在页面中自适应排布，并且最后一行的div盒子可以与前面的盒子对齐。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container{display: grid;grid-template-columns: repeat(auto-fill, 300px); /* 自动填充，宽度固定300px*/justify-content: space-around; /* 两端对齐 */gap:20px /* 间距为20px */}.items{width: 300px;height: 300px;background-color: skyblue;border: 1px solid black;}</style>
</head><script>
</script>
<body><div class="container"><div class="items">1111</div><div class="items">2222</div><div class="items">3333</div><div class="items">4444</div><div class="items">5555</div><div class="items">6666</div><div class="items">7777</div><div class="items">8888</div><div class="items">9999</div><div class="items">10101010</div><div class="items">11111111</div></div>
</body>
</html>
效果图：浏览器窗口变化，盒子排布也会变动
图一：
图二：
