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高级选择器使用方法
Dec 02 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
Aug 28 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
css中z-index: 0和z-index: auto的区别
Aug 23 HTML / CSS
HTML中link标签属性的具体用法
May 07 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 中的输出缓冲
2006/12/21 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
医药专业应届毕业生求职信范文
2014/01/01 职场文书
运动会稿件50字
2014/02/17 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
模特大赛策划方案
2014/05/28 职场文书
公务员培的训心得体会
2014/09/01 职场文书
react中的DOM操作实现
2021/06/30 Javascript
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python