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 mask遮罩实现一些特效
Oct 24 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
详解利用css3的var()实现运行时改变scss的变量值
Mar 02 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
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的大小写敏感问题整理
2011/12/29 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
php-app开发接口加密详解
2018/04/18 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
pandas 选择某几列的方法
2018/07/03 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
详解Python利用random生成一个列表内的随机数
2019/08/21 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
德国旅行、体验和活动的预订平台:Watado
2019/12/04 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
软件测试题目
2013/02/27 面试题
停车场管理协议书范本
2014/10/08 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
《灰雀》教学反思
2016/02/19 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang