技术演讲-grid布局

grid布局

网格线.PNG

属性.PNG

1.项目只能是容器的顶层子元素，不包含项目的子元素

  1. .item{
  2.     border: 1px solid hotpink;
  3. }
  5. <div class="container">
  6.   <div class="item"><p>1</p></div>
  7.   <div class="item"><p>2</p></div>
  8.   <div class="item"><p>3</p></div>
  9. </div>

2.指定一个容器采用网格布局display: grid

//grid、inline-grid
.container{
    display: grid;
}
.item{
    border: 1px solid hotpink;
    float:left;
}

<div class="container">
  <div class="item"><p>1</p></div>
  <div class="item"><p>2</p></div>
  <div class="item"><p>3</p></div>
</div>

tip:设为grid布局后，项目的flaot，
display：inline-block；
display：table-cell；
vertical-align，
column-*等设置会失效；

3.定义网格中的行和列

//使用repeat()函数，简化重复的值,也可重复某种模式;
//单位：px，%，fr

//minmax()两个参数，控制长度范围

//auto关键字--由浏览器自己决定长度

//grid-template-columns: 100px auto 100px;
//grid-template-columns: [c1] 100px [c2] auto [c3];
//grid-template-rows: [r1] 100px [r2] 200px [r3];
//格布局允许同一根线有多个名字[r1 row-5]

.container{
    display:grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    //repeat(2,100px)
    //repeat(2,100px 20px)
    //grid-template-columns: 1fr minmax(100px,1fr);
}
.item{
    border: 1px solid slateblue;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

4.margin的值可为负值，消除盒子的边框

.container{
    display:grid;
    grid-template-columns: repeat(2,100px);
    grid-template-rows: repeat(2,100px);
}
.item{
    margin-left:-1px;
    margin-top:-1px;
    border: 1px solid slateblue;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

5.网格容器内容区域实现水平垂直居中

//justify-content属性是整个内容区域在容器里面的水平位置（左中右）
//align-content属性是整个内容区域的垂直位置（上中下）
//start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <align-content> <justify-content>;

.container{
    display:grid;
    border:1px solid pink;
    grid-template-columns: repeat(2,100px);
    grid-template-rows: repeat(2,100px);
    justify-content: center;
    align-content: center;
}
.item{
    margin-left:-1px;
    margin-top:-1px;
    border: 1px solid slateblue;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

6.设置单元格内容的水平/垂直位置(justify-items/align-items)

//justify-items属性设置单元格内容的水平位置（左中右）
//align-items属性设置单元格内容的垂直位置（上中下)
//start | end | center | stretch;
//place-items: <align-items> <justify-items>;

.container{
    display:grid;
    border:1px solid pink;
    grid-template-columns: repeat(2,100px);
    grid-template-rows: repeat(2,100px);
    //justify-content: center;
    //align-content: end;
  place-items: center end;
}
.item{
    margin-left:-1px;
    margin-top:-1px;
    border: 1px solid slateblue;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

7.gird项目的换行

auto-fill关键字--自动填充
应用场景:单元格的大小是固定的，但是容器的大小不确定,希望每一行（或每一列）容纳尽可能多的单元格，

.container{
    display:grid;
    border:1px solid pink;
    grid-template-columns: repeat(auto-fill,100px);
    //每列宽度100px，然后自动填充，直到容器不能放置更多的列
    grid-template-rows: repeat(2,100px);
}
.item{
    margin-left:-1px;
    margin-top:-1px;
    border: 1px solid slateblue;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

8.设置项目之间的间距

//column-gap--列间距
//row-gap--行间距
//gap: row-gap column-gap;

.container{
    display:grid;
    border:1px solid pink;
    grid-template-columns: repeat(4,300px);
    gap:20px;
}
.item{
    margin-left:-1px;
    margin-top:-1px;
    border: 1px solid slateblue;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

9.指定新增的行高

//grid-auto-rows
//grid-auto-columns
用来设置浏览器自动创建的多余网格的列宽和行高

10.grid-auto-flow属性

//默认值是row--先行后列   
column  
row dense
column dense
//某些项目指定位置以后，剩下的项目怎么自动放置

11.项目属性

grid-column-start
grid-column-end
grid-column

grid-row-start
grid-row-end
grid-row

span关键字 跨越单元格  --z-index

grid-area属性指定项目放在哪一个区域--与grid-template-areas
grid-template-areas: 'a b c'
                    'd e f'
                    'g h i';

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
直接指定项目的位置

12.设置单元格内容的水平位置—只作用于单个项目

justify-self属性设置单元格内容的水平位置（左中右）
align-self属性设置单元格内容的垂直位置（上中下）
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
place-self: <align-self> <justify-self>;