css grid实现九宫格布局

本文主要是介绍css grid实现九宫格布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

       常见的九宫格布局可以使用flex布局实现，但是flex布局有个致命的缺陷，比如3行3列的布局，当第不足3个元素的时候，元素依然是平局平铺的，这样就不满足九宫格的效果，这种情况，使用grid布局可以轻松搞定这个问题

           html布局

<div class="layout"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">3</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div>
</div>

           css样式

<style>.layout{display: grid;/*fr是山哥单位，如果想一行展示4个元素，那么填上4个fr即可*/grid-template-columns: 1fr 1fr 1fr;gap: 10px;margin-left: 10%;width: 80%;height: 80vh;}.item{background: chartreuse;display: flex;/*控制元素上下居中*/justify-content: center;/*控制元素左右居中*/align-items: center;}</style>

            效果

这篇关于css grid实现九宫格布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---