Grid 布局 - 网格布局
目录
一、什么是Grid布局
二、容器属性值
2.1 grid-template-rows和grid-template-columns
2.1.1 grid-template-columns
2.1.2 grid-template-rows
2.2 row-grap和column-grap
2.2.1 row-grap
2.2.2 column-grap
2.3 grid-template-area
2.4 grid-auto-flow
2.5 justify-items（水平方向）和 align-items（垂直方向）
2.5.1 justify-items
2.5.2 align-items
2.6 justify-content (水平方向) / align-content (垂直方向)
2.7 grid-auto-columns 和 grid-auto-rows
三、项目属性
3.1 grid-column-start / grid-column-end 和 grid-row-start / grid-row-end
3.2 grid-column / grid-row
3.3 grid-area
3.4 justify-self / align-self / place-self
3.4.1 设置justify-self
3.4.2 设置align-self
3.4.2 设置place-self
四、基本概念图分享
一、什么是Grid布局
grid布局将容器划分为 行 和 列，产生单元格，可以将其看作为二维布局，也称为网格布局
二、容器属性值
2.1 grid-template-rows和grid-template-columns
需要多少行或列，根据自己需求填写，属性值个数，不填写则自动分配
首先准备容器和项目，并用不同的颜色区分项目
<body><div class="main"><div class="item item-1">1</div><div class="item item-2">2</div><div class="item item-3">3</div><div class="item item-4">4</div><div class="item item-5">5</div><div class="item item-6">6</div><div class="item item-7">7</div><div class="item item-8">8</div><div class="item item-9">9</div><div class="item item-10">10</div></div>
</body>.main{display: grid;width: 600px;height: 600px;border: 10px solid skyblue;
}
.item{font-size: 50px;background-color: red;color: #fff;
}.item-1{background-color: orangered;
}
.item-2{background-color: orange;
}
.item-3{background-color: palegreen;
}
.item-4{background-color: palevioletred;
}
.item-5{background-color: papayawhip;
}
.item-6{background-color:peru;
}
.item-7{background-color:pink;
}
.item-8{background-color:royalblue;
}
.item-9{background-color: saddlebrown;
}
.item-10{background-color: slateblue;
}页面效果展示 - 容器和项目
2.1.1 grid-template-columns
（1）为容器.main的grid-template-columns赋值，例如：规定项目为3列且每个项目的宽度为100px
/* grid-template-columns: 100px 100px 100px; *//* repeat()函数，简化重复的值 grid-template-columns: repeat(<重复次数>,<数值>) */grid-template-columns: repeat(3,100px);页面效果展示
（2）grid-template-columns: repeat(auto-fill,100px)，其中auto-fill，有时在单元格大小是固定时，容器未规定宽高时会自动填充
grid-template-columns: repeat(auto-fill,100px);页面效果展示 - 设置宽和高600px
页面效果展示 - 未设置宽高，随浏览器伸缩自动填充
（3）fr，表示比例关系，网格布局提供了fr关键字
grid-template-columns: repeat(3,1fr);例如：设置容器宽和高都为600px，grid-template-columns: repeat(3,1fr)，分为3分，每份一等分，即每份容器宽度为200px
页面效果展示 - fr
grid-template-columns: 1fr 2fr 3fr;页面效果展示 - fr，占据份额不同，容器宽和高都为600px，第3份占据总份额的一半，即宽度为300px
（4）minmax() 函数，产生一个长度范围，接受两个参数，分为最小值和最大值
grid-template-columns: 1fr minmax(300px,1fr);表示第二列项目宽度最小值为300px，最大值为1fr
页面效果展示
页面效果展示 - 缩小浏览器使第二列项目宽度达到300px
2.1.2 grid-template-rows
为容器.main的grid-template-rows赋值
/* grid-template-rows: 100px 100px 100px 100px; */grid-template-rows: repeat(4,100px);页面效果展示
2.2 row-grap和column-grap
item相互之间的距离
2.2.1 row-grap
row-gap: 20px;页面效果展示
2.2.2 column-grap
column-gap: 20px;页面效果展示
若行和列间距相同则可以缩写
gap: 20px;2.3 grid-template-area
一个区域由单个单元格或多个单元格组成，具体使用，由个人决定
区域的命名会影响到网格线，每个区域的起始网格线会自动命名为 区域名-start，终止网格线会自动命名为 区域名-end
grid-template-areas: 'a b c' 'd e f' 'g h i';区域不需要利用则用点代替
grid-template-areas: 'a . c' 'd . f' 'g . i';2.4 grid-auto-flow
划分网格后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是先行后列。
grid-auto-flow: row;页面效果展示 - grid-auto-flow属性赋值：row
grid-auto-flow: row dense;添加dense能够更好得利用空间
页面效果展示 - 未添加dense
页面效果展示 - 添加dense
2.5 justify-items（水平方向）和 align-items（垂直方向）
设置单元格内水平和垂直的对齐方式
2.5.1 justify-items
justify-items: strat / end / center / stretch
justify-items: center;页面效果展示 - justify-items: center
2.5.2 align-items
align-items: center;页面效果展示 - align-items: center
/* 简写，place-items: <justify-items值> <align-items值>; */place-items: center center;2.6 justify-content (水平方向) / align-content (垂直方向)
设置整个内容区域的水平和垂直的对齐方式
justify-content: start / end | center / stretch / space-around / space-between / space-evenly
align-content: sstart / end | center / stretch / space-around / space-between / space-evenly
justify-content: center;页面效果展示
align-content: center;页面效果展示
justify-content: space-around;align-content: space-around;页面效果展示
2.7 grid-auto-columns 和 grid-auto-rows
用来设置多出来的项目宽和高
grid-template-columns: repeat(3,100px);grid-template-rows: repeat(3,100px);grid-auto-rows: 50px;页面效果展示
三、项目属性
3.1 grid-column-start / grid-column-end 和 grid-row-start / grid-row-end
用来指定item的具体位置, 根据在哪根网格线
例如：项目1从网格线1开始到网格线3结束
.item-1{background-color: orangered;grid-column-start: 1;grid-column-end: 3;
}页面效果展示.
span跨越几根网格线
/* grid-column-start: 1; *//* grid-column-end: 3; */grid-column-start: span 2;/* 效果相同 */3.2 grid-column / grid-row
grid-column: 开始的网格线 / 结束的网格线
/* grid-column-start: 1; *//* grid-column-end: 3; */grid-column: 1 / 3;/* 效果相同 */3.3 grid-area
指定项目放在哪一个区域
容器.main设置区域
grid-template-areas: 'a a a' 'b b b' 'c c c';项目.item item-1设置区域
grid-area: b;页面效果展示
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并
简写形式，直接指定项目的位置
grid-area: <row-start> / <column-start> / <row-end> / <column-end>
grid-area: 1 / 1 / 3 / 3;
3.4 justify-self / align-self / place-self
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，
但只作用于单个项目(水平方向)
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，
也是只作用于单个项目(垂直方向)
place-self属性是align-self属性和justify-self属性的合并简写形式
justify-self: start / end / center / stretch
align-self: start / end / center / stretch
place-self: <justify-self属性值> <align-self属性值>
3.4.1 设置justify-self
justify-self: center;页面效果展示 - justify-self: center
3.4.2 设置align-self
align-self: center;页面效果展示 - 添加上align-self: center
3.4.2 设置place-self
与设置justify-self: center且align-self: center 效果相同
place-self: center center;四、基本概念图分享
基本概念图片来源与B站 耕耕老师（id：耕耕技术宅）作图，感觉做得很棒，可以作为基本概念参考图，简单明了
Grid 布局 - 网格布局相关推荐
- grid layout网格布局详解
grid layout网格布局详解 什么是grid layout grid的特点 grid css属性的基础知识 创建一个grid布局 创建一个网格 隐性网格与显性网格 尺寸单位fr repeat函数 ...
- Grid：网格布局基础简述
一.Grid:网格布局 Grid顾名思义就是"网格",它的子控件被放在一个一个实现定义好的小格子里面,整齐配列.Grid和其他各个Panel比较起来,功能最多也最为复杂. 要使用 ...
- css【详解】grid布局—— 网格布局（栅格布局）
网格布局(Grid)是最强大的 CSS 布局方案 grid布局 和 flex布局的区别 Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局. Grid 布 ...
- CSS布局—网格布局Grid（一）
CSS网格可以定义由行和列组成的二维布局,然后将元素放置到网格中.有些元素可能只占据网格的一个单元,另一些元素则可能占据多行或多列.网格的大小既可以精确定义,也可以根据自身内容自动计算.你既可以将元素 ...
- grid 栅格/网格布局学习笔记
1.前言 栅格布局或者说网格布局是很好用的东西,像一些商城类的排版就很适合用栅格布局,但是存在一定的兼容性问题,兼容性暂时还没有研究,这边学习总结是针对grid也就是栅格布局的使用的学习总结,下面将介 ...
- grid layout(网格布局、栅格布局、grid布局)：bootstrap，请到历史书报道！
grid布局就是表格布局(grid layout),或者称之为栅格布局也行.因为栅格布局的概念来自于bootstrap,这里使用栅格布局来与bootstrap做关联,是因为它俩是描述的同一个东西.自从 ...
- CSS弹性布局网格布局
一.Flexbox 弹性框布局模块,可更轻松设计灵活的响应式布局,而无需使用浮动或定位. 首先应给容器设置display 属性 <div class="flex-container&q ...
- 【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )
文章目录 一.网格布局 TableLayout 一.网格布局 TableLayout 网格布局 需要设置整个布局中有多少行 , 多少列 , 每个单元格都可以设置一个组件 , 这个组件可以是单个 , 也 ...
- 安卓学习笔记11：常用布局 - 网格布局
文章目录 零.学习目标 一.网格布局概述 1.布局特点 2.继承关系图 3.常用属性 (1)针对布局的属性 (2)针对子控件的属性 二.案例演示--计算器界面 (一)运行效果 (二)涉及知识点 (三) ...
最新文章
- 2020年度最佳的23个的机器学习项目（附源代码）
- linux下织梦cms安装环境配置文件,Mac本地环境配置以及安装织梦CMS，增加新的坑解决办法...
- 【Spring Cloud】Redis缓存接入监控、运维平台CacheCloud
- android照片备份软件下载,照片备份云相册app下载-照片备份云相册下载V1.9安卓版-西西软件下载...
- 装饰者模式（Decorator）
- Java进阶之网络编程
- 二叉树——基本知识+python实现
- Web UI设计师的CSS优化工具 25+
- Linux Apache服务详解——用户个人主页实战
- Python_notes_05
- 高可用之2——存储b
- 双光耦开关电源电路图_光耦817应用电路图汇总（PC817光电耦合器/开关电源/TL431）...
- 云计算，大数据，人工智能本质和概念
- 搭建完美的数学计算环境: iTeXmacs+maxima
- Beta版本 为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 == Dec 25。
- Python四大神兽（迭代器生成器闭包装饰器）
- 网页中插入Flash动画（.swf）代码和常用参数设置
- Servlet 三大作用域
- Discriminative Reasoning for Document-level Relation Extraction
- 网易笔试题 寻找第K大