-
CSS网格布局简介--》二维方向的自适应
注意
而flex布局则是一维，即只能在一个方向上进行自适应
查看全部 -
fit-content()
--根据公式Min(最大大小，最大值（最小大小，参数）)将给定大小夹紧为可用大小
语法
grid-template-columns:fit-content(<length> | <percentage>);
grid-template-rows:fit-content(<length> | <percentage>);
查看全部 -
Grid Layout(网格布局)的认识 1.它在最近几年(2017年前后)开始在国内兴起，所以说是比较新的前端技术。 2.它属于二维布局，不同于Flex(弹性盒子)的一维布局 3.和Flex(弹性盒子)布局相比有更大的便利性，与Flex Layout在布局方面相辅相成，并不是说前者取代了后者。 4.要学好网格布局，首先要打好HTML和CSS基础，尤其要深刻认识盒子模型查看全部
-
网格轨道：两个相邻的网格线之间为网格轨道，可以到达容器边缘。
网格单元：一个网格子，有网格线决定，里面可以不包含元素，不同于网格项。
网格区域：多个网格单元。
单位：fr——剩余空间分配数，可按比例分配。gr——网格数（还在不断完善当中）。
查看全部 -
justify-items 和 align-items 可以用 place-items （垂直，水平）简写；justify-content 和 align-content 可以用 place-content（垂直，水平） 简写。
stretch 和 start 的区别是，当grid-template-columns设置的列宽为auto时，前者会把item能有多宽就撑开多宽，后者相反，能挤多窄就挤成多窄。
space-around：会使容器左右两边有一点点等宽的外边距，为item列间隙的一半。
space-evenly：会使容器左右两边和列之间的间距等宽。
space-between：使得item间隙均等，容器外边缘无间隙。
查看全部 -
网格布局的grid-template，使用空格分隔的多个值来定义网格的列和行：
grid-template-columns：100px auto 10% 1fr 2fr;网格有有5列，第一列宽度为100px，第二列为每个单元格内容的宽度，第三列为网格容器宽度的10%，第四列、第五列是总宽度减去一二三列的宽度后按1:2的比列分配的宽度
grid-template-rows：200px auto;网格有两行，第一行高度为200px，第二行高度为单元格内容的高度
若单元格数多于写的行数和列数，后面为定义的行的宽度为auto
查看全部 -
当元素设置了网格布局，
display：grid | inline-grid | subgrid；
column、float、clear、vertical-align属性无效
查看全部 -
用grid做整体布局，用flexbox做局部布局
查看全部 -
grid-template-columns 有几个数值就分成多少列；
grid-template-rows 有几个数值就分成多少行；
auto在没有fr的情况下会自动撑开剩余空间，但如果有fr，auto则会显示出最小值（在没有宽度的情况下，auto默认为0，显示内容宽度）；简单说可以理解成优先于fr；
查看全部 -
简写查看全部
-
例子查看全部
-
grid-area
--给grid item 进行命名以便于使用grid-template-areas属性创建模版时来进行引用
语法
grid-area:<name> | <row-start> / <column-start> / <row-end> / <column-end>;
参数说明
<name>:grid-template-areas中定义的命名。
<row-start> / <column-start> / <row-end> / <column-end>:可以是数字，也可以是网格线的名字。
查看全部 -
简写start-end
查看全部 -
grid-column/row-start/end
--使用特定的网格线确定grid item在网格内的位置
参数说明
<line>:可以是一个数字来指定相应编号的网格线，也可使用名称指代相应命名的网格线
span <number>:网格项将跨越指定数量的网格轨道
span <name>:网格项将跨越一些轨道，直到碰到指定命名的网格线，必须结合start使用才有效，单独使用无效。
auto:自动布局，或则自动跨越，或则跨越一个默认的轨道
注意
1，如果没有声明grid-column-end/grid-row-end,默认情况下，该网格项将跨越1个轨道。
2，网格项可以相互重叠，可以直接使用z-index来控制它们的堆叠顺序
查看全部 -
minmax()
--定义了一个长宽范围的闭区间
语法
minmax([<length> | <percentage> | <flex> | min-content | max-content | auto | ],[<length> | <percentage> | <flex> | min-content | max-content | auto);
参数说明
flex:单位为fr的非负维度，指定轨道弹性布局的系数值。
min-content:自适应内容最大的那个单元格
max-content:自适应内容最小的那个单元格
auto:作为最大值，等价于max-content.作为最小值时，它表示轨道中单元格最小宽度（由min-width/min-height）的最大值。
查看全部
举报