display:grid 网格布局的基础使用
css新特性——网格布局
我们通过在元素上声明 display:grid
来创建一个网格容器。一旦我们这样做,这个元素的所有直系子元素将成为网格元素。
它将元素分割成行与列,通过栅格栏的形式弥补了flex布局在响应式方面的缺陷。
在这个例子中,这有一个类名为 wrapper
的div
元素作为容器 ,它内部有五个子元素。
<div class="wrapper"><div>One</div><div>Two</div><div>Three</div><div>Four</div><div>Five</div>
</div>
将 wrapper置为网格容器,并且添加 grid-template-columns列轨道
.wrapper {display: grid;grid-template-columns: 200px 200px 200px;
}
这样我们就讲将容器通过列进行分割
同时可以通过设定fr单位来行成响应式,并且通过repeat的方式来减少代码的重复
fr单位
轨道可以使用任何长度单位进行定义。 网格还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。新的fr
单位代表网格容器中可用空间的一等份。下一个网格定义将创建三个相等宽度的轨道,这些轨道会随着可用空间增长和收缩。
.wrapper {display: grid;grid-template-columns: 1fr 1fr 1fr;
// grid-template-columns: repeat(3, 1fr);
}
调整网格间距
在两个网格单元之间的 网格横向间距 或 网格纵向间距 可使用 grid-column-gap
和 grid-row-gap
属性来创建,或者直接使用两个合并的缩写形式 grid-gap
grid-column-gap: 10px;grid-row-gap: 1em;
补充知识点:
row:自动布局算法把网格项按顺序填充到每一行,必要时添加新行。这是grid-auto-flow的缺省值。
column:自动布局算法把网格项按顺序填充到每一列,必要时添加新列。3
总结:网格布局实际上深入后可以完成许多以前并不能简单完成的场景。如:一维布局和二维布局
通过align-self:center或justify-self:center可以控制网格布局中的元素的位置,这并不是简单地定位就能解决的问题。
网格布局相使得布局结构更加强大
常用的UI库的栅格栏布局同样是通过grid进行封装的,了解grid的原理,方便更好的使用栅格栏布局
display:grid 网格布局的基础使用相关推荐
- CSS3中的display:grid网格布局介绍
1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...
- display:grid 网格布局
一.第一个示例了解网格布局 <!DOCTYPE html> <html> <head> <style> .item1 {grid-area: myAre ...
- Grid网格布局、Grid容器和Grid项目
1. Grid网格布局(基础知识) ①Grid容器(container)和项目(item) 采用grid网格布局的元素,称为Grid容器 display:grid|inline-grid; Grid容 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- CSS Grid 网格布局完整教程
前言 一.概述 二.基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三.容器属性 3.1 display 属性 3.2 行与列属性定义 明文定义 百分比定义 repeat ...
- CSS Grid网格布局详解
Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...
- html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略
所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直在不断地推陈出新.其中网格布局( ...
- CSS Grid 网格布局全解析
一.介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情 ...
- CSS的Grid网格布局
Grid网格布局 就是通过设置百分比,或者默认划分的单位个数,来达到宽度自适应的效果 比如,页面控件的宽度,设置自适应随着显示器的宽度的增加而增加,网页永远占满整个屏幕 .searchContentR ...
最新文章
- ASP.netcore MVC钉钉H5微应用(二)鉴权
- 如何成为强大的程序员?(转)
- SVM支持向量机(上)
- php底层实现也是c语言,深入php内核,从底层c语言剖析php实现原理
- Node.js listen EADDRINUSE 错误解决 How to solve nodejs Error: listen EADDRINUSE
- 展望 | 2020年人工智能八大趋势
- Java基础-面向接口(interface)编程
- php查询ip归属地api接口_【php】利用新浪api接口与php获取远程数据的方法,获取IP地址,并获取相应的IP归属地...
- 数据结构上机实践第四周项目3 - 单链表应用
- Java保留2位小数(六种方法)
- java象棋人机_Java版中国象棋人机对战源代码,作者将AI算法用得淋漓尽致JAVA游戏源码下载...
- 简述电子计算机发展五个阶段,简述erp发展的5个阶段
- 苏宁易购正在“酝酿”下一场蝶变?
- 工程经济—技术方案经济效果评价
- sns_sensor_instance_api
- Linux系统的优点小结
- 极客时间 - Vim学习
- SANGFOR SCSA——信息安全概述
- 华为S/CE系列交换机stelnet示例(带外管理地址绑定vpn实现业务和管理平面的隔离)
- 绍兴14岁女孩被德云社录取,她究竟有什么来历呢?