浅析 CSS Grid 布局(中)

已注销
705 阅读8分钟

四、 容器上的属性

grid-template-*

dnZTgI.png

你想要多少行或者列，就填写相应属性值的个数

如果没有设置就自动分配宽度和高度

修改grid.css如下：

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  /*
     grid-template-columns: 100px 100px 100px;
     水平分3列，每一列的宽度都是100px
  */
  grid-template-columns: 100px 100px 100px;
  /*
   grid-template-rows: 100px 100px 100px;
   垂直分3行，每行100px
  */
  grid-template-rows: 100px 100px 100px;
}

效果图

dnuhLt.png

可以看到的是 前3行按照每行100px进行了填充

剩余的那行，自动分配高度和宽度，所以其会填满整个容器的高度

grid-template-* 相关的属性

  • repeat

    • 第一个参数是重复的次数，第二个参数是所要重复的值
    .main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  /*
    repeat(3, 100px) === 100px 100px 100px
  */
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}

    效果

    dnuhLt.png

  • auto-fill

    • 单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充
    .main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  /*
   repeat(auto-fill, 100px) 表示每一个单元格的宽度为100px
   但是放多少个，由浏览器来进行决定
  */
  grid-template-columns: repeat(auto-fill, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
}

    效果

dnQjOA.png

  • fr

    • 为了方便表示比例关系(权重)，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）
    .main {
  border: 5px solid skyblue;
  display: grid;
  /*
    1fr 2fr 3fr 表示从左往右开始计算 每个元素分别占 16.67% 33.33% 50%
    
    grid-template-columns: repeat(4, 1fr); //宽度平均分成4份
  */ 
  grid-template-columns: 1fr 2fr 3fr;
  grid-template-rows: repeat(auto-fill, 100px);
}

    效果

    dn1qrd.gif

    fr和flex中的权重的概念是一致的，所以其是一个相对单位

    从上图可以看出item的最小宽度是item内文本内容的宽度

  • minmax()

    • 函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
    .main {
  border: 5px solid skyblue;
  display: grid;
  /*
    1fr minmax(150px, 1fr 一共有2个元素
    第一个元素占50%
    第二个元素的宽度为[150px, 50%]
  */
  grid-template-columns:  1fr minmax(150px, 1fr);
  grid-template-rows: repeat(auto-fill, 100px);
}

    效果图

    dn3mGT.gif

  • auto

    • 表示由浏览器自己决定长度
    .main {
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  /*
    中间的宽度由浏览器决定，自动分配
    所以表现为全部填充
  */  
  grid-template-columns:  100px auto 100px;
  grid-template-rows: repeat(auto-fill, 100px);
}

    效果

dn8ynJ.gif

  • 网格线

    • 可以用方括号定义网格线名称，方便以后的引用
    • 网格线是为了定位和布局使用的，所以设置以后在这里是没有任何的效果的
    .main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  /*
    这里有3列，所以有4根分割线
    这里[]内的内容为这根分割线的名称，可以任意取，如[c3],[aa],[a1]
    但是分割线的名称定义依旧需要遵守变量的定义方式
    如果风格线名称出错，这一行样式就会失效，但是界面是不会报错的
  */  
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: repeat(auto-fill, 100px);
}

    dnGG8K.png

横向和纵向都可以为网格线设置名称

gap

gap可以分为column-gap和row-gap

gap = column-gap + row-gap

tips: 根据最新标准，上面三个属性名的grid-前缀已经删除

也就是原本这3个属性叫做grid-gap，grid-column-gap, grid-row-gap

gap表示的是item（项目）相互之间的距离

.main {
    width: 600px;
    height: 600px;
    border: 5px solid skyblue;
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(auto-fill, 100px);
    /*
    以下2个属性可以简写为 gap: 20px 20px ---> gap: 20px
    column-gap: 20px;
    row-gap: 20px;
    */
    
    /*
    注意:
    1、设置间距的时候，gap的第一个参数是行间距，第二个参数是列间距
    如果gap的行间距和列间距相等的时候，可以合并
    2、在设置行间距或列间距的时候，其两边的间距必须是相等的
    类似于colum-gap: 10px 20px; 这一类的写法是错误的
    其只能修改为 column-gap: 10px 或 column-gap: 20px
    */
    gap: 10px;
}

效果

dnN3ee.png

grid-template-areas

/*
	下述代码表示的是 item1 ~ item10 中， 每一个单元格都是一个组，item10除外

	其中‘’ 内表示一行
	‘’ 和 '' 之间的空格表示的是换行
	‘’内部的各个元素之间使用空格进行隔离
	
	注意: 这里的命令只要符合命名规范，可以任意命名
	例如： a, a1, aa ...
*/
grid-template-areas: 'a b c' 'd e f' 'g h i';

/*
 	上述代码为了方便阅读，一般写作
*/
grid-template-areas: 'a b c' 
					 'd e f' 
					 'g h i';

/*
	下述代码的意思是: 把item1 ~ item3 划分为一个组
					 item4 ~ item6 划分为一个组
					 item7 ~ item9 划分为一个组
*/
grid-template-areas: 'a a a'
					 'b b b'
					 'c c c';

/*
	. 表示 该item 不想被分组，所以在分组的时候，.对应位置的item会被忽略，不进行分组
*/
grid-template-areas: 'a . c' 
					 'd . f' 
					 'g . i';

  • 分组也是为了定义和布局的，所以此处设置完暂时依旧是没有任何的效果的

  • 区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end

  • 注意： 相同的组名只能写在同一行或者同一列上，否则的话在进行布局的时候，会需要将元素拆开进行设置，这显然是不可能的，所以界面会凌乱

    a a a a b c a d e a d e

    b b b 或 a b c 这样排列是正确的 f a g 或 a f a 这样排列是错误的

    c c c a b c h j a g a h

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即先填满第一行，再开始放入第二行 （就是子元素的排放顺序）, 简而言之，其就是设置元素的排列是横向排列，还是纵向排列

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  /*
  	grid-auto-flow的默认属性值是row  
  */
  grid-auto-flow: column;
  gap: 10px;
}

dnU5gP.png

dense

在grid-auto-flow中可以这是dense

其作用是自动尽可能的去填充可以填充的空白区域

没有设置dense的grid

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  grid-auto-flow: row ;
  gap: 10px;
}

.item-1 {
  background-color: #ef342a;
  grid-column: 1 / 3;
}

.item-2 {
  background-color: #f68f26;
  grid-column: 1 / 3;
}

效果

dnduzq.png

设置了dense的grid

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  grid-auto-flow: row ;
  gap: 10px;
}

.item-1 {
  background-color: #ef342a;
  grid-column: 1 / 3;
}

.item-2 {
  background-color: #f68f26;
  grid-column: 1 / 3;
}

效果

dnd3eU.png

  • justify-items(水平方向) / align-items (垂直方向)
    • 设置单元格内容的水平和垂直的对齐方式
    • justify-items: start | end | center | stretch;
    • 注意： item 后边是有s的
    • justify-items: start dnw11I.png
    • justify-items: end dnwaNQ.png
    • justify-items: center dnwdhj.png
    • justify-items: stretch dnwrj0.png
    • align-items: centerdn0urV.png
.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  gap: 10px;
  /* 
  	水平居中： 注意其中的宽度会变得和文本一样宽  
  */  
  justify-items: center;
}

dnwTu6.png

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  gap: 10px;
  /*
    垂直居中： 注意其中的高度会变得和文本一样高
  */  
  align-items: center;
}

dnw7DK.png

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

place-items: ;

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(auto-fill, 100px);
  gap: 10px;
  /*
    place-item: center center === place-item: center
  */
  place-items: center;
}

dnwLUe.png

  • justify-content (水平方向) / align-content (垂直方向)

    • 设置整个内容区域的水平和垂直的对齐方式

    • justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

      align-content: start | end | center | stretch | space-around | space-between | space-evenly;

    • content是整个内容区域，也就是所有的item组合而成的哪一个集合容器

.main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  /*
    这里设置了auto-fill，所以列会根据100px自动划分个数
    又因为只设置了前10个item的样式，
    所以其后边还存在5个透明的不可见的item（★★★）
  */  
  grid-template-rows: repeat(auto-fill, 100px);
  gap: 10px;
  justify-content: center;
  align-content: center;
}

dnBwyq.png

  • grid-auto-columns / grid-auto-rows

    • 用来设置多出来的项目宽和高
    .main {
  width: 600px;
  height: 600px;
  border: 5px solid skyblue;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  justify-content: center;
  align-content: center;
  /*
    这个属性用来设没有在grid-template-rows中设置的列的属性
    意思就是多余行的每一个元素的高度全部设置为60px
  */
  grid-auto-rows: 60px;
}

    结果

dnDCtg.png

avatar
文章
阅读
粉丝