前端之css grid网格布局
grid网格布局
- 一、创建 CSS 网格
- 1.说明
- 2.创建 CSS 网格
- 二、添加网格结构(行和列)
- 1. 在父容器中设置列
- 2. 在父容器中设置行
- 3. 使用 CSS 网格单位设置列和行的大小
- 三、网格间距
- 1. 列间距 grid-column-gap
- 2. 行间距 grid-row-gap
闯关学习:grid网格布局
一、创建 CSS 网格
1.说明
Grid 布局 与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。
- Flex 布局是轴线布局(,只能指定"项目"针对轴线的位置),可以看作是一维布局。
- Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
Grid 布局远比 Flex 布局强大。
2.创建 CSS 网格
- 为父容器添加 display: grid;
- 在 CSS 网格中,父元素称为容器(container),它的子元素称为项(items)。
<style>.container {display: grid;}
</style>
二、添加网格结构(行和列)
1. 在父容器中设置列
每个数值代表列的宽度, 数值的个数就是列数
<style>.container {display: grid;/* 添加的代码 */grid-template-columns: 100px 100px 100px;/* 添加的代码 */}
</style>
2. 在父容器中设置行
每个数值代表行高, 数值的个数就是行数
<style>.container {display: grid;grid-template-columns: 100px 100px 100px;/* 添加的代码 */grid-template-rows: 50px 50px;/* 添加的代码 */}
</style>
3. 使用 CSS 网格单位设置列和行的大小
类似于ps绝对定位单位, em相对(父元素)定位单位,rem相对(根元素)定位单位
CSS 网格单位的相对定位单位是
fr (fraction 片段) 按比例占领剩余尺寸
auto 根据内容占据尺寸
% 按百分比占领剩余尺寸
<style>
.container {display: grid;grid-template-columns: 150px 1fr 2fr;/* 第一列的宽度为150像素,第二列的宽度是第三列的一半。*/
}
</style>
三、网格间距
1. 列间距 grid-column-gap
<style>.container {display: grid;grid-template-columns: auto auto auto auto;/* 四列 */grid-column-gap: 50px; /* 列间距 50px + 50px */}
</style>
2. 行间距 grid-row-gap
<style>.container {display: grid;grid-template-rows: auto auto auto auto;/* 四列 */grid-row-gap: 5px; /* 行间距 5px + 5px */}
</style>
前端之css 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 网格布局全解析
一.介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情 ...
- 轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...
- CSS—— grid 网格布局
文章目录 1. grid 网格布局 1. grid 网格布局 display:grid grid 属性是以下属性的简写属性,默认: grid-gap , none,[200px]网格之间的距离 gri ...
- CSS Grid网格布局详解
Grid 布局又称网格布局,是W3C提出的一个二维布局系统,它与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别.Flex 布局是轴线布局,只能指定" ...
- html实现网格布局排版整齐的表格,CSS Grid 网格布局全攻略
所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直在不断地推陈出新.其中网格布局( ...
- CSS Grid 网格布局教程
作者: 阮一峰 日期: 2019年3月25日 一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 ...
- CSS Grid 网格布局详解
目录 一:Grid简介 二:基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三:容器属性 3.1 display 属性 3.2.grid-template-columns ...
最新文章
- Zabbix Python API 应用实战
- RequestParam注解在required设置为true时失效
- 关于requestAnimationFrame与setInterval的一点差异
- sklearn的train_test_split函数
- leetcode 47. 全排列 II 思考分析
- php爬虫js解析,Spider抓取动态内容(JavaScript指向的页面)
- Linux内核 eBPF:Hacking Linux USDT with Ftrace
- 弱网测试用什么农_弱网测试--使用fiddler进行弱网测试
- MYSQL中5.7.10ROOT密码及创建用户
- vmware使用显卡 | vmware切换显卡 | vmware显卡配置
- 学习笔记——经纬度坐标系及定位相关API
- 台式机和台式计算机的区别,台式机和一体机区别是什么
- 日志管理logging的使用
- 高等代数 线性映射(第9章)3 不变子空间与最小多项式
- Ajax 发送json格式数据以及发送文件(FormData)和自带的序列化组件: serializers
- MATLAB如何计算函数导数
- linux可以下编辑器吗,在Ubuntu系统上也可以下载安装深度编辑器
- 《Spring Boot+Vue全栈开发实战》读书笔记
- 天线理论知识5——微带天线
- 使用 DS-MDK 开发 NXP iMX7