所用小知识:
1、rem单位/em单位
1rem、1em在html文本font-size默认为16px,根据字体大小改变
2、fr单位
自动根据比例改变列宽,不会产生水平方向的滚动条
3、grid-template-columns
指定多少列,各占多少,repeat(num,px/fr/rem)函数可快熟设置多少列多少宽
4、grid-row/columns-gap
设置行间距或列间距
5、grid-auto-rows
设置div高度,指定为100px,则每个div都为100px的固定高度,指定为minmax(100px,auto)函数,则表示由内容撑开的div高度<100px,则指定为100px高度,若内容撑开>100px,则由内容撑开高度展示。
6、justify-items
grid布局中,设置全部div行对齐方式,start为按行轴线左对齐,center为按行轴线居中对齐,end为按行轴线右对齐。
7、align-items
grid布局中,设置全部div列对齐方式,start为按列轴线上对齐,center为按列轴线居中对齐,end为按行轴线下对齐。
8、justify-self、align-self
对wrapper里的单个div子元素设置行对齐/列对齐。
9、grid-column、grid-row
垂直网格线,水平网格线,改变div所占的大小
实例:
1、grid初识
html部分:
<div class="wrapper">
<div>LOrem80</div>
# 生成80个lorem介绍的单词
<div>LOrem50</div>
</div>
css部分:
.
.wrapper{
display:grid;
# grid布局
grid-template-columns:60% 40%;
# 形成两列的布局,并指定两列各占多少,没有指定grid-template-columns就是默认各占一行,没有table类似的效果,会产生横向滚动条
grid-column-gap:1rem;
# 设置div的列宽,1rem在html文本font-size默认为16px,根据字体大小改变
grid-row-gap:1rem;
# 设置div之间的行距
# grid-gap:1rem;
# 上面两个的简写
}
.wrapper div{
background:#eee;
padding:1rem;
}
.wrapper div:nth-child(odd){
# odd表示定位wrapper里奇数的div
background:#ddd;
}
页面:
由于设置了列宽,产生了水平方向的滚动条
2、
html部分:
<div class="wrapper">
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet.</div>
</div>
css部分:
.wrapper{
display:grid;
grid-template-columns:1fr 1fr 1fr;
# 三列,并三等分,用fr做单位,不会产生横向的滚动条
#grid-template-columns:1fr 2fr 2fr;
# 三列,二三列各占五份中的两份
grid-gap:1rem;
# 行间距,列间距都设为1rem
grid-auto-rows:minmax(100px,auto);
# 自动改变div高度
}
.wrapper div{
background:#eee;
padding:1rem;
}
.wrapper div:nth-child(odd)