摘要：布局兼容性支持老的语法目前大多数的浏览器实现了支持或者停留在实验特性基本概念网格容器网格项网格项网格轨道网格单元网格区的属性定义在容器的属性生成块级网络生成行内网络作为网格项需要继承父网格的行列大
GRID布局 兼容性
IE10 IE11 支持老的语法
目前大多数的浏览器实现了支持, 或者停留在实验特性
Grid Container 网格容器
Grid Item 网格项
Grid Line 网格项
Grid Track 网格轨道
Grid Cell 网格单元
Grid Area 网格区
定义在容器的属性 display grid-template-columns grid-template-rows grid-template-areas grid-column-gap grid-row-gap grid-gap justify-items align-items justify-content align-content grid-auto-columns grid-auto-rows grid-auto-flow grid
display
grid 生成块级网络 inline-grid 生成行内网络 subgrid 作为网格项需要继承父网格的行列大小
grid-template-columns grid-template-columns 设置行和列的大小
grid-template-columns: 40px 50px auto 50px 40px ;
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
// line-name track-size line-name 在行轨道或列轨道两边是网格线
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; // 网格线double name
grid-template-columns: repeat(3, 20px [col-start]) 5%; // 等价于下面的表达
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;
grid-template-columns: repeaat(3, 1fr); // 将容器分为三等份
grid-template-columns: 1fr 50px 1fr 1fr; // fr 的行列将划分剩余部分
grid-template-areas
通过获取网格项中的grid-area属性值（名称），来定义网格模版。重复网格区（grid-area）名称将跨越网格单元格，‘.’代表空网格单元
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
}
.item-a{
grid-area: header;
}
.item-b{
grid-area: main;
}
.item-c{
grid-area: sidebar;
}
.item-d{
grid-area: footer;
}
grid-gap: grid-row-gap 和 grid-column-gap 的简写
justify-items
垂直于列网格线对齐
start end center stretch(默认)
align-items
垂直于行网格线对齐
start end center stretch
justify-content
使用px等非弹性单位定义, 总网格区域大小可能会小于网格容器, 设置网格横向对其方式
start 顶部对齐 end 底部对齐 center 居中对齐 stretch 填满网格容器 space-around 网格项两边间距相等，网格项之间间隔是单侧的2倍 space-between 两边对齐, 网格项之间间隔相等 space-evenly 网格项间隔相等
align-content
grid-auto-columns grid-auto-rows
自动生成隐式网格轨道, 当定位网格超出网格容器的范围时, 将自动创建隐式网络轨道
grid-auto-flow
row 按照行依次从左到右排列 column 按照列依次从上到下排列 dense 按先后顺序排列
grid
grid: 200px auto / 1fr auto 1fr;Item的属性
grid-column grid-column-start grid-column-end 的缩写
grid-row grid-row-start grid-row-end 的缩写
grid-area 父容器定义的 grid-template-areas
justify-self
align-self
justify-self 定义单个网格项垂直于列网格线的对齐方式
start: 网格区域左对齐 end: 网格区域右对齐 center: 网格区域居中 stretch: 网格区域填满(默认)
align-self 定义单个网格项垂直于行网格线的对齐方式
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114674.html
摘要：浏览器兼容性网格布局从开始收到支持，微软在会更新对网格布局的支持。微软的浏览器和有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。 原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者：华翔 校对者：珂珂、干干 翻译 | CSS网格（CSS Grid）布局入...
摘要：网格单元格被划分之后每一个格子就是单元格，也是布局的最小单位。网格区域若干个单元格拼接而成的区域。网格间隙单元格与单元格之间的距离，可以垂直也可以水平。 前言 CSS网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。像表格一样，网格布局让我们能够按行或列来对齐元素。 但是，使用CSS网格可能还是比CSS表格更容易布局。 例如，网格容器的子元素可...
摘要：简介网格布局又称网格，是一种二维网格布局系统。在处理网页布局方面一直做的不是很好。网格容器中的所有子元素就会自动变成网格项目网格线组成网格线的分界线。 简介 CSS网格布局（又称网格），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是...
摘要：和绝对定位和绝对定位如果父容器有定位标识等，那么下面的子会根据原始它们应该布局的位置定位，反之如果父容器没有定位标识，那么应用了会脱离布局，并且按照传统的方式布局。基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...
摘要：代码如下页面内容样式接下来，将侧边栏和主内容区域使用一个包含起来。列和行布局部分横跨所有的列。也可以使用简写，起始值和结束值位于同一行上，并用斜杠分隔。设计方法总结以上的布局设计中，使用了来进行整体布局以及设计中的非线性部分。 CSS 浮动属性一直是网站上排列元素的主要方法之一，但是当实现复杂布局时，这种方法不总是那么理想。幸运的是，在现代网页设计时代，使用 Flexbox 和 CSS...
摘要：基于网格线的占位区网格中的单元格是有网格线划分出来的，那么在网格布局中，同样可以使用网格线来给子元素设置占位区域。也就是说这四条网格线间的区域是一个单元格。 CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局：什么是网格布局》和《[CSS Grid布局：浏览器开启CSS Grid Layout]ht...
阅读 2241·2021-11-10 11:35
阅读 847·2021-09-26 09:55
阅读 2369·2021-09-22 15:22
阅读 2296·2021-09-22 15:17
阅读 3656·2021-09-09 09:33
阅读 1778·2019-08-30 11:22
阅读 925·2019-08-30 10:57
阅读 579·2019-08-29 16:10
