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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 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学习笔记 IIS7下安装配置php环境
2012/10/29 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP实现简易计算器功能
2020/08/28 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
原生js开发的日历插件
2017/02/04 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
python实现Decorator模式实例代码
2018/02/09 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python 安装impala包步骤
2020/03/28 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
职专应届生求职信
2013/11/16 职场文书
授权收款委托书范本
2014/10/10 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
Python图像处理之图像拼接
2021/04/28 Python
golang 实现并发求和
2021/05/08 Golang
Redis入门基础常用操作命令整理
2022/06/01 Redis