cssgrid系统在项目中的灵活运用

时间：2023-03-31 12:10:26 CSS

前言CSSgrid通常捆绑在各种框架中，但有时需要自定义一个cssgrid来满足实际业务需求。这篇文章讲的是css网格系统在项目中的灵活运用。需求UI设计了如下布局，左上角橙色部分固定，蓝色部分动态渲染，从前到后依次显示。如果有一个就显示一个，如果有两个就显示两个，以此类推。如果超过6条数据，则冗余数据将依次显示在下方四列中。分析从图中可以看出，网格有两种，一种是3列网格，一种是4列网格。后台接口返回数据后，js需要做判断：当数据大于6时，将前6个放入数组A，数组A中的数据以3列的格子显示，超出的部分为放在数组B中，数组B中的数据显示在一个4列的网格中。html部分

{{item.name}}css部分.grid-container{width:100%;}.grid-container*{box-sizing:border-box;}.grid-container.row:before,.grid-container.row:after{content:"";显示：表格；明确：两者；}.grid-container[class*='col-']{float:left;民和右：1px；/*--装订线--*/padding:0020px20px;}.grid-container.col-3{宽度：33.33%；高度：120px；}.grid-container.groups-cell{背景颜色：#66d3ff;高度：100px；}.grid-container.col-4{宽度：25%；高度：120px；}.grid-container.col-4:nth-child(4n+1){填充：00px20px0px；}注意：在4列网格中，每行的第一个单元格不需要padding-left，所以最后，你必须设置.col-4:nth-child(4n+1)的值js部分总结本文不讲解cssgrid的原理，而是针对具体的业务问题，如何使用cssgrid系统提供解决问题的方法，对于grid的原理系统，请参考参考部分。这位老外写的很详细。请参阅创建您自己的CSS网格系统

上一篇：ZooTeam前端周刊｜第1期98

下一篇：20个真实的前端灵魂拷问，了解这些，你就是中级前端工程师【上篇】

cssgrid系统在项目中的灵活运用相关文章