初涉grid布局????（二）

上一篇在这，项目基本结构不变 初涉grid布局:cat:（一）

<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
    </div>
    <style>
        .item{
            border: 5px solid rgba(0, 0, 0, 0.03); 
            border-radius: 3px;
            font-size: 35px;
            background-color: #ffc600;
        }		 
    </style>
复制代码

基于分割线放置单个项目 (item)

grid-column-start , grid-column-end 这两个属性是设置的item上的，不是container上。 这两个属性可以指定分割线的数值。

分割线数值

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.item1{
    grid-column-start: 2;
    grid-column-end:3;
}
复制代码

grid-column-start 和 grid-column-end 可以缩写为 grid-column grid-column: 1 / -1 表示占据100%的grid的宽度（注意grid的宽度不一定等于容器的宽度哦）

span

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.item1{
    grid-column-start: 2;
    grid-column-end: span 2;
}
复制代码

span表示跨度，如上所示，item开始的地方在第二条线上跨度了两个单元。

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
}
.item1{
    grid-column-start: span 2;
}
复制代码

根据规范上所说，个人感觉应该是比如第一个item它是1,2, 但是因为它开始的部分是 span 2 ,所以它的初始位到3了，而此时结束位还在2,根据规范要进行交换。

If the placement for a grid item contains two lines, and the start line is further end-ward than the end line, swap the two lines. If the start line is equal to the end line, remove the end line.

自动创建行列填充

当我们不知道容器宽度的时候想动态的创建 grid-template-columns 时可以用 auto-fit 和 auto-fill 这两个属性。 grid-template-columns: repeat(auto-fit, 150px); 不考虑gap的情况下，当容器只有300px的时候就会创建两列，有450px宽的时候就会创建三列。

关于这两个区别可以参考 Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit | CSS-Tricks

区域 (area)

<div class="container">
    <div class="item item1">
      <p>I'm Sidebar #1</p>
    </div>
    <div class="item item2">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, sed.</p>
      <p>Lorem ipsum d</p>
    </div>
    <div class="item item3">
      <p>I'm Sidebar #2</p>
    </div>
    <div class="item footer">
      <p>I'm the footer</p>
    </div>
  </div>
  <style>
    .container {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: 1fr 10fr 1fr;
      grid-template-rows: 150px 150px 100px;
      grid-template-areas:
        "sidebar-1  content   sidebar-2"
        "sidebar-1  content   sidebar-2"
        "footer     footer    ."
    }
    .footer {
      grid-area: footer;
    }
    .item1 {
      grid-area: sidebar-1;
    }
    .item2 {
      grid-area: content;
    }
    .item3 {
      grid-area: sidebar-2;
    }
  </style>
复制代码

grid-template-areas 设置对应格子(cell) 的名称，每个名字可以占用多个格子。 “.” 表示死区，footer只用了两个格子，省略不写的话会报错。 其中点开 grid-area 会发现

这里我理解的是各个area所代表的边界。

居中

justify-items and align-items

.container{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    justify-items: center;
    align-items: center;
    grid-gap: 20px;
}
复制代码

如图所示 justify-items 和 align-items 可以将项目在单元格内居中，而且会使得项目的宽度是它本身的宽度，而不会占满单元格。和flex，没有设置 align-items 很像，不设置的时候会自动被填满。 place-items 可以将这两个属性合起来写。

justify-content and align-content

.container{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    height: 400px;
    justify-content: center;
    align-content: center;
    grid-gap: 20px;
}
复制代码

如图所示，是将container内部的整体进行居中。

align-self and justify-self

justify-items 和 align-items 都是作用于所有的项目上，这个可以设置单个项目的排列方式。

.container{
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    justify-items: center;
    align-items: center;
    grid-gap: 20px;
}
.item1{
    justify-self: start;
    align-self: start;
}
复制代码