最近做的一个项目使关于5个图片的布局 如下图
1、以行自动填充
话不多说代码放下
HTML代码如下:
<div class="box">
<div v-for="(item,index) in leisure" :key="index" class="img1"> //循环获取数据
<img :src="item.image" style="width:100%"/>
</div>
</div>
CSS代码如下
.box{
display: grid; //设置为网格布局
grid-template-rows: 1fr 1fr 1fr; //设置行数 3行
grid-template-columns: 1fr 1fr; //设置列数 2列
grid-auto-flow: row dense; //已"行为"填充
}
.img1:first-child{ //第一张图片设置样式
grid-row-start: 1; //第一个图片以第一行开始
grid-row-end: 3; //第一个图片到第三行(不包括第三行)结束
}
2、以列自动填充
如下图
话不多说代码放下
HTML代码如下:
<div class="box">
<div v-for="(item,index) in leisure" :key="index" class="img1"> //循环获取数据
<img :src="item.image" style="width:100%"/>
</div>
</div>
CSS代码如下
.box{
display: grid; //设置为网格布局
grid-template-rows: 1fr 1fr 1fr; //设置行数
grid-template-columns: 1fr 1fr; //设置列数
grid-auto-flow: column; //以列填充
grid-template-areas: "a b d" "a c e"; //填充区域
}
.img1:first-child{
grid-area: a; //第一个图片的填充区域为a
}