适用于复杂布局
display: grid;
grid-template-columns: repeat(5,1fr);//列高
grid-template-rows: repeat(2,1fr);//行高
row-gap: 8px;//行间距
column-gap: 8px;//列间距
div:nth-child(7){
grid-column-start: 3;//列起始位置
grid-column-end: span 2;//列结束位置
}
div:nth-child(8){
grid-row-start: 1;
grid-row-end: span 2;//占位2
grid-column-start: 5;
}
或者更直观的
const list = ref<any>([
{
name: '资源门户',
Mark: 'a',
link: `${baseUrl[ENV]['webUrl']}/portal_new`
},
{
name: '数据汇交',
Mark: 'b',
},
{
name: '数据管理',
Mark: 'c',
},
{
name: '数据质检',
Mark: 'd',
},
{
name: '治理分析',
Mark: 'e',
},
{
name: '服务发布',
Mark: 'f',
},
{
name: '管理后台',
Mark: 'g',
}
])
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
'a a b b b b b b'
'a a c c d d e e'
'a a f f f g g g';
.item {
cursor: pointer;
// cursor: not-allowed;
img {
width: 100%;
height: 100%;
}
&:hover {
-webkit-transform: translateY(-8px);//悬浮动画
transform: translateY(-8px);
}
}
.itemDisabled {
filter: grayscale(100%);//置灰
cursor: not-allowed;
}
第二个效果如下