Grid 宫格常用布局的实现


Posted in HTML / CSS onJanuary 10, 2020

两边无缝隙,每列之间有缝隙

width: 100%;  
display: grid;  
grid-template-columns: repeat(4,1fr);  
justify-items: stretch;  
grid-gap: 1px;

属性介绍:justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)。

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。

属性介绍:容器指定了网格布局以后,接着就要划分行和列。grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。repeat(4,1fr)表示重复,第一个参数表示次数,这里一共4列,那就是4次,1rf表示份的概念,repeat(4,1fr)代表平均分为4份

效果如下:

Grid 宫格常用布局的实现

行与列间隙相同,填充排列方向优先填满垂直方向

.swiper-slide-inner {  
    width: 100%;  
    display: grid;  
    /*优先垂直方向排列*/  
    grid-auto-flow: column;  
    /*分为三列,平均分*/  
    /*grid-template-columns: repeat(3, 1fr);*/  
    grid-template-columns: 1fr 1fr 1fr;  
    /*分为2行,平均分配*/  
    /*grid-template-rows: repeat(2, 1fr);*/  
    grid-template-rows: 1fr 1fr;  
    grid-row-gap: 10px;  
    grid-column-gap: 10px;  
    .card-item {  
        display: flex;  
        flex-wrap: wrap;  
        width: 230px;  
        height: 230px;
    }
}

属性介绍:划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,即下图数字的顺序。这个顺序由grid-auto-flow属性决定,默认值是row,即"先行后列"。也可以将它设成column,变成"先列后行"。

效果如下:

Grid 宫格常用布局的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
IE9下html5初试小刀
Sep 21 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
Html5之自定义属性(data-,dataset)
Nov 19 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 #HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 #HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 #HTML / CSS
详解CSS3新增的背景属性
Dec 25 #HTML / CSS
CSS3实现缺角矩形,折角矩形以及缺角边框
Dec 20 #HTML / CSS
css3实现背景动态渐变效果
Dec 10 #HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 #HTML / CSS
You might like
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
js中new一个对象的过程
2017/02/20 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
jQuery实现带进度条的轮播图
2020/09/13 jQuery
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python中base64与xml取值结合问题
2019/12/22 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
深入了解Python enumerate和zip
2020/07/16 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
护士自我评价范文
2014/01/25 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
项目合作意向书范本
2014/04/01 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
临时用工协议书范本
2014/10/29 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python