Grid 布局-容器项
grid 网格布局是一个用于web的二维布局系统, 多行多列.
flex 单行布局则更倾向于一维布局, 一行或者一列.
Grid 重点
只是用表格进行排版哈, 横向内容直接无关联哦.
| 容器项 | 子项 | 布局应用 |
|---|---|---|
| 定义网格及 fr 单位 | 显式与隐式网格 | 叠加布局 |
| 合并网格及命名 | 基于线的元素放置 | 多种组合排列布局 |
| 网格间隙及简写 | 子项对齐方式 | 栅格布局 |
| 网格对齐方式及简写 | repeat() 与 minmax() | 容器自适应行列布局 |
Grid 容器项属性
因为是二维的, 这个属性的数量就比 flex 要多很多哦, 但其实真正也没有常用那没多啦.
| A | B |
|---|---|
| justify-items | grid-template-rows |
| align-items | grid-template-columns |
| place-items | grai-template-areas |
| justify-content | grid-template |
| align-content | grid-row-gap |
| place-content | grid-column-gap |
| grid-auto-flow | grid-gap |
| grid-auto-rows | / |
| grid-auto-columns | / |
定义网格和 fr 单位
这个 grid 和 表格 table 其实有点相像.
都是有行 row, 有列 column, 有单元格 cell, 有间隙 gap, 有合并单元格区域 area.
定义网格的行和列维度, 及其网格线名称, 轨道尺寸大小等, 主要用这两个属性:
- grid-template-rows
- grid-template-columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-template</title>
<style>
.main {
width: 300px;
height: 200px;
background-color: pink;
/* 用 display 声明容器项是 grid */
display: grid;
/* 声明行列 */
/* grid-template-rows: 100px 100px 100px; */
/* grid-template-columns: 100px 100px 100px; */
/* grid-template-rows: 50px 20% auto; */
/* grid-template-columns: 50px 50px; */
/* fr 分配空间, 类似 flex 的 1, 2, 这种 */
grid-template-rows: 2fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.main div {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<!-- <div>7</div>
<div>8</div>
<div>9</div> -->
</div>
</body>
</html>
合并网格及命名
grid-template-area 会以命名方式的形式定义网格区域, 即 合并单元格.
在子项上需要配合 grid-area 进行使用.
- grid-template-rows + grid-template-columns
- grid-template-areas
- grid-area 子项引用
- grid-template = 行列 + 合并区域
实战了一下, 确实通过 grid-template 简写的方式比较高效简洁哦:
grid-template:
"a1 a1 a2" 1fr
"a1 a1 a2" 1fr
"a3 a3 a3" 1fr
/ 1fr 1fr 1fr;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-template-area</title>
<style>
.main {
width: 300px;
height: 200px;
background-color: pink;
display: grid;
/* grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
/* 自定义区域名字进行合并 */
/* grid-template-areas:
"a1 a1 a2"
"a1 a1 a2"
"a3 a3 a3"; */
/* grid-template 简写: 右边的 fr 表示行, 最下边的 '/ + fr' 表示列 */
grid-template:
"a1 a1 a2" 1fr
"a1 a1 a2" 1fr
"a3 a3 a3" 1fr
/ 1fr 1fr 1fr;
}
.main div {
background-color: pink;
box-sizing: border-box;
border: 1px solid #000;
}
/* 子项上去使用 */
.main div:nth-of-type(1) {
grid-area: a1;
}
.main div:nth-of-type(2) {
grid-area: a2;
}
.main div:nth-of-type(3) {
grid-area: a3;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
网格间隙及简写
主要是在容器项设置子项行列间的间隙大小, 主要这三个, grid-row-gap, grid-column-gap, grid-gap 单位了兼容其他容器的布局方式, 比如 flex, 因此我们更推荐使用时将 grid 前缀去掉, 即变成了:
- row-gap
- column-gap
- gap
不论是 grid 还是 flex, 直接用 gap: xx px; 即设置好行列间隙啦.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid-gap</title>
<style>
.main {
width: 300px;
height: 200px;
background-color: pink;
display: grid;
grid-template:
"a1 a1 a2" 1fr
"a1 a1 a2" 1fr
"a3 a3 a3" 1fr
/ 1fr 1fr 1fr;
/* 设置行列间距 */
/* row-gap: 20px;
column-gap: 30px; */
/* gap 推荐复合写法, 先行后列 */
gap: 10px 20px;
}
.main div {
background-color: pink;
box-sizing: border-box;
border: 1px solid #000;
}
/* 子项上去使用 */
.main div:nth-of-type(1) {
grid-area: a1;
}
.main div:nth-of-type(2) {
grid-area: a2;
}
.main div:nth-of-type(3) {
grid-area: a3;
}
.main2 {
/* 不给高度让它换行自动撑开 */
width: 300px;
background: pink;
display: flex;
flex-wrap: wrap;
/* 和 grid 一样, 这个 gap 是通用的 */
/* row-gap: 10px;
column-gap: 20px; */
/* 1个值写法, 给行列都设置10的间隙 */
gap: 10px;
}
.main2 div {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- 和 grid 一样, 这个 gap属性 是通用的 -->
<div class="main2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
网格对齐方式及简写
和 flex 对齐方式类似, 也是通过在容器项中, 设置在自行网格中的对齐方式来进行排版控制, 默认值是 strench 即是拉伸的, 它是设置每个子项相对自身区域的比如 左对齐, 居中, 靠上/靠下等.
容器尺寸小于网格区域尺寸时, 才能看到效果
- justify-items
- align-items
- place-items
也是同上面的 gap 一样, 只要记住它是相对于子项自己区域的排列就好啦, 复合写法测一下就行不用记.
/* 先垂直, 再水平, 不过不用记, 测试一把就知道啦 */
place-items: end center;
还有与之相对于的三个属性, 它是设置整个网格对齐方式, 如左对齐, 居中, 靠上/靠下等.
容器尺寸大于元素尺寸时, 才能看到效果
- justify-content
- align-content
- place-content
同理, 也是只要记住它是相对于整个网格的位置排列 就好啦, 复合写法测一下就行不用记.
/* 先上下, 后左右 不过不用记, 测试一把就知道啦 */
place-content: start end;
当容器尺寸 <= 网格区域尺寸时, place-items:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>place-items</title>
<style>
.main {
width: 300px;
height: 200px;
background-color: pink;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
/* 当子项尺寸小于分配区域时, 相对于自身分配与的对齐 */
/* start, center, end */
/* justify-items: center;
align-items: start; */
/* 先垂直, 再水平, 不过不用记, 测试一把就知道啦 */
place-items: end center;
}
.main div {
/* 当子项尺寸小于分配区域时, 默认就会填不满容器 */
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
当容器尺寸 > 网格区域尺寸要大时, place-content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>place-content</title>
<style>
.main {
width: 500px;
height: 500px;
background-color: pink;
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
/* align-content: start;
align-content: end; */
/* 先上下, 后左右 不过不用记, 测试一把就知道啦 */
/* place-content: start end; */
}
.main div {
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
但这个容器比整个网格尺寸要大的场景是非常小的, 通常都是会设置为一样的大小, 因此这个 place-content 属性应该是很少用到的啦, 但 place-items 却基本都会用到哦.
隐式网格于显式网格
用来设置在显式网格之外的隐式网格, 如何排列及尺寸大小, 也是对应三个属性:
- grid-auto-fow
- grid-auto-rows
- grid-auto-colums
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应行列排列 grid-auto-flow</title>
<style>
.main {
width: 300px;
height: 300px;
background-color: pink;
display: grid;
/* 设置为 1x3, 多的部分就变成隐式网格了 */
/* grid-template-rows: 100px; */
/* grid-template-columns: 100px 100px 100px; */
/* 默认 row 就是行产生隐式网格, 多出来的会自动折行 */
/* grid-auto-flow: row; */
/* 默认宽度会保持一致, 高度会拉伸, 但可调整 */
/* grid-auto-rows: 100px; */
/* 设置为 3x1, 要设置多的部分按列进行隐式网格折列, 否则会超出容器 */
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px;
/* 需要手动设置折列了哦， 高度保持一致， 宽度拉伸 */
grid-auto-flow: column;
/* 但宽度也可以调整 */
grid-auto-columns: 100px;
}
.main div {
background-color: skyblue;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<!-- 隐式网格 -->
<div>4</div>
<div>5</div>
</div>
</body>
</html>
关于 grid 布局, 容器项常用的属性就差不多啦, 看上去很多, 其实也不少, 关键是有个理解和能查询就行啦.
Grid 布局-容器项的更多相关文章
- 学习WPF——WPF布局——初识布局容器
StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window x:Class="Wpf ...
- WPF 10天修炼 第四天- WPF布局容器
WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...
- 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...
- 学习WPF——WPF布局——了解布局容器
WPF布局工作内部原理 WPF渲染布局时主要执行了两个工作:测量和排列 测量阶段,容器遍历所有子元素,并询问子元素所期望的尺寸 排列阶段,容器在合适的位置放置子元素,并设置元素的最终尺寸 这是一个递归 ...
- CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- 快速使用CSS Grid布局，实现响应式设计
常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...
- Grid布局指南
简介 CSS网格布局(又称“网格”),是一种二维网格布局系统.CSS在处理网页布局方面一直做的不是很好.一开始我们用的是table(表格)布局,然后用float(浮动),position(定位)和in ...
- CSS Grid 布局
CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...
- CSS Grid布局指南
简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...
- grid 布局的使用
grid 布局的使用 css 网格布局,是一种二维布局系统. 浏览器支持情况:老旧浏览器不支持, 概念: 网格容器.元素应用dispalay:grid,它是所有网格项的父元素. <div cla ...
随机推荐
- [MQ] Kafka
概述: Kafka 安装指南 安装 on Windows Step1 安装 JDK JDK 安装后: 在"系统变量"中,找到 JAVA_HOME,如果没有则新建,将其值设置为 JD ...
- JavaUtils - [03] 代码生成器（旧）
题记部分 001 || 引入依赖 <!-- Code Generator --> <dependency> <groupId>com.baomidou</gr ...
- Live2D - 模型预览图
chitose epsilon2_1 haru-01 haru-02 hijiki tororo vert_normal vert_swimwear ryoufuku seifuku ...
- Ansible - [04] 关于sudo的一些配置
sudo sudo,以超级管理员或其他人的身份执行命令 基本流程 管理员需要先授权(修改/etc/sudoers文件) 普通用户以sudo的形式执行命令 可以通过sudo -l查看授权情况 配置sud ...
- Spark - [01] 概述
一.Spark是什么 Spark 是一种基于内存的快速.通用.可扩展的大数据分析引擎. Apache Spark is a unified analytics engine for large-sca ...
- C#弃元表达式的用法
原文地址:http://cshelloworld.com/home/detail/1803462343674433536 弃元符号是什么 弃元符号在C#中只是一个下划线 _,当程序员不想关注某些变量的 ...
- 关于DC1的渗透报告：
打开DC1,发现我们需要登录DC1,但是我们不知道密码,所以我们只能扫描分析一下他的IP地址,在kali中我们用nmap来扫描发现 DC1的IP地址也许是192.168.42.130,我们看看他开了什 ...
- 记录网站从http升级到https遇到的问题
1.静态资源(js.css)引入问题 在使用http是之后,如果你的站点出现引入外部的js.css等,你需要修改你的资源引入,cdn的话可以写成://cdn.bootscdn.com/jquery.m ...
- Go语言遍历字符串——获取每一个字符串元素
遍历字符串有下面两种写法. 遍历每一个ASCII字符 遍历 ASCII 字符使用 for 的数值循环进行遍历,直接取每个字符串的下标获取 ASCII 字符,如下面的例子所示. theme := &qu ...
- NumPy学习10
今天学习了3节: 18, NumPy副本和视图 19, NumPy字节交换 20, NumPy Matrix矩阵库 numpy_test10.py : import numpy as np ''' 1 ...