gird网格布局 - 技术栈

使布局变为网格布局

display: gird;或者display: inline-grid;这两者的区别就在于前者是块级元素，后者是行内元素、

按比例划分网格 fr

1fr 2fr表示后者是前者的两倍, 前者的数字与后者的数字相加就是总共分的分数，
1fr 2fr表示总共分了3分，前者占1/3后者占2/3

html 复制代码

section{
    width: 600px;
    height: 300px;
    display: grid;
    grid-template-rows: 1fr 2fr 3fr;
    grid-template-columns: repeat(3, auto );
    border: 1px solid red;
}
div{
    background-color: aqua;
    padding: 5px;
    background-clip: content-box;

}
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</section>

自动填充

grid-template-rows,grid-template-columns中auto和auto-fill属性
auto: 可以用在repeat函数中和单独写
auto-fill: 只能应用在repeat函数中的第一个参数，比如repeat(auto-fill, 20%)表示自动填充每一份占20%，未分配的空间将空余

html 复制代码

<style>
    section{
        width: 600px;
        height: 500px;
        border: 1px solid red;
        display: grid;
        grid-template-rows: 100px auto 100px;
        grid-template-columns: repeat(auto-fill, 20%);
    }
    div{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: aqua;
        background-clip: content-box;
        padding: 5px;
        font-size: 40px;
    }
</style>

网格行和列 grid-template-rows、grid-template-column

这两个属性可以有多种设置值的方式，
1. 直接使用单位的 100px
2. 使用百分比 20%
3. 使用repeat函数
  - 1). grid-template-rows: repeat(2, 50%)表示分两行，每一行占50%
  - 2). repeat(2, 100px 50px)表示一行占100px,下一行占50px，并且重复两次，也就是分4行

html 复制代码

<style>
    section{
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-rows: repeat(2, 50%);
        grid-template-columns: repeat(5, 20%);
    }
    div{
        background-color: blueviolet;
        border: 1px solid black;
        background-clip: content-box;
        padding: 5px;
        color: white;
        font-size: 18px;
    }
</style>

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</section>

行和列之间的间距

gap属性：间隙
gird-gap: 10px 20px;是一个复合属性10px表示rows, 20px表示column
也有单个属性grid-row-gap,gird-column-gap

html 复制代码

section{
    height: 500px;
    width: 500px;
    border: 1px solid red;
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    /* grid-row-gap: 10px;
    grid-column-gap: 10px; */
    grid-gap: 10px 20px;
}
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</section>

网格的排列方向

grid-auto-flow属性调整网格的排列方向，默认值为row是横着排列，可以设置成column竖着排列

最大值和最小值minmax

当空间满足时，显示最大值，
当空间不足时，使用最小值
当空间不满足最大值且大于最小值时，则取值为最小值与最大值中间的值

html 复制代码

section{
    height: 500px;
    width: 500px;
    display: grid;
    grid-template-rows: 200px 160px minmax(100px, 200px);
    grid-template-columns: repeat(3, 100px);
    border: 1px solid red;
}
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</section>

项目的对其方式

对齐方式：justify-items水平方向，align-items垂直方向，这两个都是单个属性
复合属性：place-items: 垂直方向水平方向

html 复制代码

section{
    height: 500px;
    width: 500px;
    border: 1px solid red;
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    /* justify-items: center;
    align-items: center; */
    place-items: center;
}
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</section>

整个网格布局的对其方式

justify-content, align-content内容对齐方式，也就是整个网格的对齐方式，复合属性place-content
justify-items, align-items是网格中项目的对齐方式,复合属性place-items

html 复制代码

section{
    border: 5px solid red;
    width: 500px;
    height: 500px;
    display: grid;
    grid-template-rows: repeat(3, 100px);
    grid-template-columns: repeat(3, 100px);
    place-content: space-between space-between;
}
<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</section>

合并单元格

gird布局合并单元格，只需要指定开始的位置和结束的位置即可，这样就能把中间的单元格合并，也可以说指定某个单元格的大小和位置，方式有两种：
- grid-row-start,gird-row-end; grid-column-start, grid-column-end
- 符合属性，gird-row,grid-column

html 复制代码

section{
    height: 500px;
    width: 500px;
    border: 1px solid red;
    display: grid;
    grid-template-rows: repeat(4, 100px);
    grid-template-columns: repeat(4, 100px);
    place-content: center center;
}
div{
    background-color: aqua;
    font-size: larger;
    border: 1px dashed red;
}
.box1{
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 5;
    display: grid;
    place-items: center center;
}
.box2{
    grid-row: 3/5;
    grid-column: 2/3;
    display: grid;
    place-items: center center;
}
<section>
    <div class="box1">box1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div class="box2">box2</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</section>