网格布局之5个格子填充

最新推荐文章于 2022-12-17 22:15:40 发布

一个假的前端男

最新推荐文章于 2022-12-17 22:15:40 发布

阅读量1.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/IT_iosers/article/details/107500401

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

最近做的一个项目使关于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				
}