grid

2020-02-03 本文已影响0人朴炯文

1 画格子

1.1 定义边线

<body>
    <div class="father"></div>
</body>
<style>
    .father {
        display: grid;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        grid-template-rows: 20% 100px 10%;
        grid-template-columns:repeat(5,20%) ;
    }
</style>

display:
- grid:是块级的
- inline-grid:是内联级的
grid-template-cloums:设置水平方向的格子个数和每个格子的宽度，单位可以是具体的值(100px)，百分比(20%)或(1fr 2fr 1fr)，repeat函数，1fr是自适应，跟flex:1,flex:2差不多
grid-template-rows:和grid-template-cloums相反
repeact函数:
- repeat(5,20%):5个重复的20%
- repeat(2,10% 40%):10% 40% 10% 40%
- repeat(auto-fill, 70px):自动填充，每个长度单位是70px，不够70px的话换行
- repeat(2,minmax(50px,100px)):每个长度单位最小50px，最大100培训、
- repeat(3,1fr):分成3等分填充
间距:
- row-gap:10px;行与行之间的间距
- colum-gap:10px;列和列之间的间距
- gap:20px 10px;行间距是20px，列间距是10px
- gap:10px;行间距是10px，列间距是10px

1.2 给格子线起名

<body>
    <div class="father"></div>
</body>
<style>
    .father {
        display: grid;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end] 100px [pjw];
        grid-template-columns:repeat(5,[r-start] 1fr [r-end]) ;
    }
</style>

<body>
    <div class="father"></div>
</body>
<style>
    .father {
        display: grid;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        grid-template-rows:repeat(3, [row-start] 1fr [row-end]);
        grid-template-columns:repeat(3, [col-start] 1fr [col-end]);
    }
</style>

1.3 定义区域

1.3.1 基本

grid-template-area相同的话会合在一起

<body>
    <div class="father"></div>
</body>
<style>
    .father {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-rows: 60px 1fr 60px;
        grid-template-columns: 60px 1fr;
        grid-template-areas: "header header" "nav main" "footer footer"
    }
</style>

1.3.2 占位符

<body>
    <div class="father"></div>
</body>
<style>
    .father {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-rows: 60px 1fr 60px;
        grid-template-columns: 60px 1fr;
        grid-template-areas: ". ." ". ." "footer footer"
    }
</style>

2 边线定位

2.1 格子边线序号

2.2 默认设置

如果里面的元素什么都不设置的话就是默认设置，默认是把里面的元素从左到右，从上到下的顺序塞进去

2.3 指定起始结束位置

.child1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-colum-start: 1;
  grid-colum-start: 4;
}

2.4 用格子线的名字来指定

普通

.child1 {
  grid-row-start: r1-start;
  grid-row-end: r1-end;
  grid-colum-start: r2-start;
  grid-colum-start: r2-end;
}

repeat

.child1 {
  grid-row-start: r-start 1;
  grid-row-end: r-end 1;
  grid-colum-start: c-start 1;
  grid-colum-start: c-end 3;
}

2.5 简写形式

.child1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-colum-start: 1;
  grid-colum-start: 4;
}

简写后

.child1 {
  grid-row: 1/2
  grid-colum: 1/4;
}

3 区域定位

3.1 根据边线定位

起始行线/起始列线/结束行线/结束列线

.child1 {
  grid-area: 1/1/2/4;
}

3.2 根据区域定位

.child1 {
  grid-area: header;
}

4 流动方向

grid-auto-flow：

默认是row，从左到右，从上到下

colum,从上到下，从左到右

grid-auto-flow：dense

该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

    .father {
        display: grid;
        width: 100vw;
        height: 100vh;
        grid-template-rows: 60px 1fr 60px;
        grid-template-columns: 60px 1fr;
        grid-auto-flow: row dense;
    }

5 对齐方式

和flex里的justify-content和align-content一样

.child {
    justify-content:
    align-content:    
}

6 整体控制grid内的元素

默认grid内的每个元素是撑满的，在.father中justify-items:stretch,align-items:stretch

7 单独控制grid内的元素

在.chlid中justify-self:,align-self: