css【详解】grid布局——⽹格布局（栅格布局）
⽹格布局（Grid）是最强⼤的 CSS 布局⽅案
grid布局和 flex布局的区别
Flex 布局是轴线布局，只能指定"项⽬"针对轴线的位置，可以看作是⼀维布局。
Grid 布局则是将容器划分成"⾏"和"列"，产⽣单元格，然后指定"项⽬所在"的单元格，可以看作是⼆维布局。Grid 布局远⽐ Flex 布局强⼤。
Grid 布局的基本术语
容器——采⽤⽹格布局的区域
项⽬——容器内采⽤⽹格定位的⼦元素（项⽬只能是容器的顶层⼦元素，不包含项⽬的⼦元素，如下⽅代码的<p>元素就不是项⽬。
Grid 布局只对项⽬⽣效。）
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上⾯代码中，最外层的<div>元素是容器，内层的三个<div>元素是项⽬。
⽹格布局的使⽤⽅法
启⽤⽹格布局 display: grid
块级容器时
display: grid;
⾏内容器时
display: inline-grid;
使⽤⽹格布局后，项⽬的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
划分列 grid-template-columns
绝对值 px
在容器内划分出3列，每列宽度为100px
grid-template-columns: 100px 100px 100px;
百分⽐值 %
将容器等分为3列，每列宽度为容器总宽度/3
grid-template-columns: 33.33% 33.33% 33.33%;
⽐例值 fr
将容器划分为2列，第1列的宽度 ：第2列的宽度 = 1:2
grid-template-columns: 1fr 2fr;
fr 是fraction 的缩写，意为"⽚段"，可以与绝对长度的单位结合使⽤
grid-template-columns: 150px 1fr 2fr;
第⼀列的宽度为150像素，第⼆列的宽度是第三列的⼀半
如果所有fr值之和⼤于1，则按fr值的⽐例划分可⾃动分配尺⼨。
如果所有fr值之和⼩于1，最终的尺⼨是可⾃动分配尺⼨和fr值的乘法计算值。
和auto关键字混合使⽤
flex布局对齐方式fr值的可⾃动分配尺⼨是容器尺⼨减去设置auto关键字的列的fit-content尺⼨。在本例中，由于设置auto关键字的这⼀列⾥⾯内容⽐较少，fit-content尺⼨就是这⼏个字符的宽度尺⼨，因此，最终的尺⼨表现就是最后3列按照1:1:1的⽐例平分了容器尺⼨减去“宽度auto”这⼏个字符的宽度得到的尺⼨。
minmax()函数值
minmax()函数产⽣⼀个长度范围，表⽰长度就在这个范围之中。它接受两个参数，分别为最⼩值和最⼤值。grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表⽰列宽不⼩于100px，不⼤于1fr。
repeat()函数值
repeat()接受两个参数，第⼀个参数是重复的次数，第⼆个参数是要重复的值。
grid-template-columns: repeat(3, 33.33%);
或
grid-template-columns: repeat(2, 100px 20px 80px);
上⽅代码定义了6列，第⼀列和第四列的宽度为100px，第⼆列和第五列为20px，第三列和第六列为80px。⽆法确定列数时，重复次数使⽤关键字：auto-fill 或 auto-fit
.container {
grid-template-columns: repeat(auto-fill, 100px);
}
.container {
grid-template-columns: repeat(auto-fit, 100px);
}
关键字往往会和其他⽹格布局函数⼀起使⽤，例如minmax()函数
.container {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
这就实现了⽆论grid容器多宽，grid⼦项都会等⽐例充满grid容器（因为设置了1fr），同时保证宽度不⼩于100px，⽹格布局的列数⾃动计算分配的智能弹性布局效果。
使⽤auto-fill关键字⾃动填充的时候，repeat()函数不能和auto⼀起使⽤的，但可以与长度值和百分⽐值⼀起使⽤。
.container {
/* 有效 -- 每⼀⾏的最后⼀列的宽度都会是容器的20%⼤⼩ */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr))20%;
}
使⽤auto-fit关键字实现的布局效果要⽐auto-fill关键字实现的更符合常规的布局需求，效果见
fit-content()函数
让尺⼨适应于内容，但不超过设定的尺⼨，常⽤于希望grid⼦项的宽度随着内容变化，但是⼜不希望宽度太⼤的场景。
.
container {
display: grid;
grid-template-columns: fit-content(100px) fit-content(100px) 40px auto;
}
fit-content()函数只⽀持数值和百分⽐值，fr值是不合法的。
min-content
最⼩内容尺⼨中最⼤的那个最⼩内容尺⼨值。⽹格布局中的同⼀⾏grid⼦项的⾼度和同⼀列grid⼦项的宽度都是⼀致的，因此min-content 指的并不是某⼀个格⼦的最⼩内容尺⼨，⽽是⼀排或者⼀列格⼦中所有最⼩内容尺⼨中最⼤的那个最⼩内容尺⼨值。
max-content
max-content关键字和min-content关键字类似，只是最终的尺⼨是最⼤内容宽度中最⼤的那⼀个值。
auto
由浏览器⾃⼰决定长度
尺⼨的上限是最⼤内容尺⼨的最⼤值，但是不同于max-content关键字，max-content关键字的尺⼨是固定的，这⾥的尺⼨是会受到justify-content属性和align-content属性影响的。计算规则有些复杂，了解即可。
grid-template-columns: 100px auto 100px;
第⼆列的宽度，基本上等于该列单元格的最⼤宽度，除⾮单元格内容设置了min-width，且这个值⼤于最⼤宽度。
划分⾏ grid-template-rows
使⽤⽅法与列相同
grid-template-rows: 100px 100px 100px;
或
grid-template-rows: 33.33% 33.33% 33.33%;
范例
.container {
grid-template-columns: 80px auto 100px;
grid-template-rows: 25% 100px auto 60px;
}
⾃动填充 auto-fill
单元格⼤⼩固定，但容器⼤⼩不确定时，如果希望每⼀⾏（或每⼀列）容纳尽可能多的单元格，可以使⽤auto-fill关键字进⾏⾃动填充。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论