grid布局记录

基本概念：容器和项目

采用网格布局的区域叫做容器，容器内部采用网格定位的叫做项目

容器属性

grid-template-columns:100px 200px

定义单元格的列宽写几个值就是几列

grid-template-rows:100px 20px

定义单元格的行高写几个值就是几行

repeat(3,200px)属性

重复,如果有多列，可以避免写多次重复的值代表是：3列，每一列的宽是200px 接受两个参数，第一个参数是重复的次数（上列是3），第二个参数是所要重复的值。

repeat()重复某种模式也是可以的。

repeat(3, 100px 20px 80px 30px) 第一个参数是重复几次，后面的参数代表的是第几列的列宽这个是4列，重复3次就是12列

auto-fill

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。 grid-template-columns: 100px 1fr 2fr; 代表第一列是的宽度是100px，后两列是将剩余宽度填充，并且第二列是第一列的2倍

minmax()

函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。 grid-template-columns: 100px 1fr minmax(200px,1fr);代表第一列宽100px 第二列自动分配，第三列最小200px，最大自动分配剩余（可以看到的效果是在宽超过200时，第二列和第三列的宽一样）

grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); 代表的是没有固定的列，每一列自动分配，但是最小宽是280px

auto 关键字

auto关键字表示由浏览器自己决定长度。 grid-template-columns: 100px auto 100px; grid-template-rows: 100px 100px auto;

grid-auto-flow 容器子元素放置顺序

默认是先行后列（row），可以修改成先列后行放置 grid-auto-flow: column;

属性值

row 先行后列

column 先列后行放置

下面这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置

row dense

column dense

正常的九宫格排列

#navMore {
   display: grid;
   grid-template-columns: repeat(3,50px);
   grid-template-rows: repeat(3,50px);
 }

设置第一个和第二个项目占用两个单元格之后的默认显示,可以看到第一行后面有空格,这是因为项目3默认是排在2后面，所以会紧跟着项目2

使用 grid-auto-flow: row dense;

#navMore {
  display: grid;
  grid-template-columns: repeat(3,50px);
  grid-template-rows: repeat(3,50px);
  grid-auto-flow: row dense;
}

可以看到使用了row dense之后将空格补齐，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。

上图会先填满第一行，再填满第二行，所以3号项目就会紧跟在1号项目的后面。8号项目和9号项目就会排到第四行。

修改为colum dense时候的效果,先列后行

 #navMore {
    display: grid;
    grid-template-columns: repeat(3,50px);
    grid-template-rows: repeat(3,50px);
    grid-auto-flow: column dense;
  }

上图会先填满第一列，再填满第二列，所以3号项目就会紧跟在2号项目的后面。8号项目和9号项目就会排到最后一列。

项目位置属性

justify-items 属性

align-items 属性

place-items 属性

上面三个属性是设置设置单元格内容水平位置和垂直位置的

justify-items和align-items分别代表的水平位置和垂直位置

属性值为

start:对齐起始位置
end:对齐结束位置
center：居中
stretch：拉伸，填充满单元格


place-items是justify-items和align-items合并简写属性

place-items:start end

以下是place-items:start end的效果图

内容区域位置

justify-content 属性

align-content 属性

place-content 属性

这几个属性是设置项目位置的，下面有例子

justify-content 和 align-content 属性值是一样的

start - 对齐容器的起始边框。
end - 对齐容器的结束边框。
center - 容器内部居中。
stretch - 项目大小没有指定时，拉伸占据整个网格容器。
space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。


place-content 是上面两个的合并简写

css代码

.box{
  width: 500px;
  height: 500px;
  margin-left: 100px;
  display: grid;
  border: 1px solid #00BC00;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 500px;
  justify-content: space-evenly;
}
.container{
  display: grid;
  /* width: 200px; */
  background: #C077AF;
}
.container:last-child{
  display: grid;
  background: #C4072C;
}

html代码

<body>
  <div class="box">
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</body>

grid-auto属性

当前列或者行超过规定的数量的时候的高度和宽度的设置

假如设置的是3*3列的，但是现在的布局有第四行第五行，那高度就可以使用grid-auto-rows: 50px;设置

这样前3行的高度是100px，超过3行的高度是50px

#navMore {
 display: grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
  /* grid-auto-flow: column dense; */
  grid-auto-rows: 50px;
}

项目属性

下面属性是定位到哪一个网格线

grid-column-start 1；从第一条网格线开始

grid-column-end 3；到第三条网格线结束

grid-row-start 2；

grid-row-end 4；

就像上一张图片效果中的项目8和项目9在不同行不同列，由下面代码实现

.item-8 {
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: #00bc00;
  }
  .item-9 {
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 3;
    grid-column-end: 4;
    background-color: #c4072c;
  }

grid-column-这一系列中还有一个属性是 span 跨越的意思

grid-column-start: span 3;和grid-column-end: span 3;是一样的效果

代表跨越3个网格

等同于
grid-column-start: 1;
grid-column-end: 4;


合并简写
 grid-column：1/3
 grid-row:2/4
  
也可以使用span

grid-column: 1 / span 3;  跨越3个网格

单元格内容位置设置

justify-self 属性

align-self 属性

place-self 属性

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。

align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。

.item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }

这两个属性都可以取下面四个值。

start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）。下面是justify-self: start的例子。

.item-1 { justify-self: start; }

根据阮一峰老师的博客学习记录 www.ruanyifeng.com/blog/2019/0…

grid布局实操记录