14、grid布局

grid-template-rows设置grid 布局网格行的高度

• 传一个参数 设置第一行的高度
• 传两个参数 第一个参数第一行 第二个参数第二行

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
/* grid-template-columns 设置grid 布局网格列的宽width   1fr*/
/* grid-template-rows 设置grid 布局网格行的高度   100px*/
*{
    margin:0;
    padding:0;
}
.parent{
    /* width: 400px; */
    height: 400px;
    background-color: red;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 200px;
}
.item{
    /* width: 100px; */
    /* height: 100px; */
    border: 1px solid #333;
}

14-4 属性值 repeat(num,value)

_grid-template-columns:repeat(num,value)_ : 第一个参数传的是 行/列数，第二个参数传递值

/* grid-template-columns: 1fr 1fr 1fr; */
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2 100px);
/* grid-template-columns: 100px auto  200px; */

14-5 设置行或列的间隙

• grid-row-gap 行间隔
• grid-column-gap 列间隔
• grid-gap:row column 第一个参数为行间距 第二个参数为列间距

<div class="parent">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.parent{
    /* width: 400px; */
    height: 400px;
    background-color: red;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    /* repeat(num,value) 第一个参数传的是 行/列数，第二个参数传递值 */
    grid-template-rows: repeat(2,100px);
    /*grid-row-gap:20px;
    grid-column-gap:10px; */
    /* grid-gap:row column*/
    grid-gap:20px 10px;
}
.item{
    border: 1px solid #333;
}

1-1 grid,grid-template-colums

grid:给父元素设置grid,会将容器切分成若干个网格 grid-template-colums： 设置grid布局网格列的width

//html
 <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
//css
.parent{
    height: 400px;
    background-color: red;
    display: grid;
    /* grid-template-columns  设置grid布局网格列的width  1fr 
 */
    grid-template-columns: 2fr 1fr 1fr;
}
.item{
    /* width:100px; */
    height: 100px;
    border:1px solid #333;
}

1-2 grid-template-rows

可以设置网格的行高

grid-template-rows:100px 200px;
//100px表示第一行的height  200px表示第二样的高度

1-3 repeat

repeat(num,value) 第一个参数传的是行/列数,第二个参数传递值

.parent{
  height: 400px;
  background-color: red;
  display: grid;
  /* repeat(num,value) 第一个参数传的是行/列数,第二个参数传递值*/
  grid-template-columns:repeat(3,1fr);
  grid-template-rows: repeat(2,100px);
}
.item{
  border:1px solid #333;
}

<div class="parent">
    <div class="item"> </div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"> </div>
    <div class="item"></div>
    <div class="item"></div>
</div>

1-4 设置行或列的间隙grid-column-gap/grid-row-gap

grid-column-gap: 10px;
grid-row-gap:20px;

1-5 justify-content|align-content

设置网格在容器中水平方向jusfity-content
设置网格在容器中垂直方向align-content

1-6 justify-items|align-items

 /* justify-items设置元素在单元格中水平方向的对齐 */
 /* align-items 设置元素在单元格中垂直方向的对齐*/

1-7 justify-self|align-self

/* 单独设置元素在单元格中的位置
        水平justify-self
        垂直align-self
*/