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 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
May 30 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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伪造referer实例代码
2008/09/20 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
python getopt 参数处理小示例
2009/06/09 Python
django实现分页的方法
2015/05/26 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
python实现单向链表详解
2018/02/08 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python hashlib加密实现代码
2019/10/17 Python
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
创业计划书模版
2014/02/05 职场文书
统计系教授推荐信
2014/02/28 职场文书
python基础详解之if循环语句
2021/04/24 Python