元素均匀排列多行之grid布局（解决常规margin-right)

遇到这种布局的时候，一开始总是不知道如何下手 因为需要考虑到各移动端的自适应问题

最初的思路是给每个元素一个margin-right，和margin-bottom. 后发现最右端的不好处理 有的屏幕智能放得下4个有的能放5个

后面就想用 display: flex; justify-content: space-around; 这样又会新出现一个 问题 最后一行 没填满的时候 around 就会很丑了 。 自己去补的话 也显得很傻

网上到处搜margin-right解决方案也找不到 后面得知了grid栅格布局 嘿嘿嘿

---

贴上链接：https://css-tricks.com/snippets/css/complete-guide-grid/

想要实现这个很简单。 

给父容器 设置 display: grid; 然后设置grid-template-columns: ; 这个用来规定一行有多少列 每列多宽。因我的子元素 宽44px 所以设置的44px. 然后设置每一行的间距 grid-row-gap: 24px;  justify-content: space-between; 和display:flex；一样 这样每行的布局就是 space-between 的布局了。 自动均分列间距。

使用grid布局的好处是。 它自动给我们在一行元素不够时 补足空白元素！ 实现 均分效果~