html中的grid布局

所用小知识：

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)