Peng Chen
Peng Chen

海贼王に俺はなる

Contact me

github github

2019 © Peng Chen

CSS Grid 网格布局

原创 CSS pengchen    2017, August 14

CSS Grid是一个强大的 web 二维布局工具,能够以行和列来进行布局;

1. 网格容器

通过设置display的属性为gridinline-grid来创建网格容器;

display: grid
默认行排列,宽度为容器的宽度;

.container{
    display: grid;
    border: 1px dashed gray;
}

图1-1.png

display: inline-grid

.container{
    display: inline-grid;
    border: 1px dashed gray;
}

图1-2.png

2.显式网格

grid-template-rows:none | <track-list> | <auto-track-list>

grid-template-columns:none | <track-list> | <auto-track-list>

这两个属性差不多的,一个是行一个是列,我下面就以grid-template-columns来举例子;

where <track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?

where <auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

grid-template-columns: <track-list> → <track-size>

where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

2.1 示例:<track-breadth>

where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto

<flex>:css数据类型,表示网格容器内的灵活长度(如1fr,1.5fr);

.container{
  display: grid;
  border: 1px dashed gray;
  grid-template-columns: 200px 1fr 1fr;
  //将容器分成3列,一列宽度为200px,然后将容器剩下的部分成2个部分,第二列和第三列各占1个部分
}

图2.1.png

2.2 示例:minmax( <inflexible-breadth> , <track-breadth> )

设置最小和最大的列宽度

where <inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

.container{
  display: grid;
  border: 1px dashed gray;
  grid-template-columns: minmax(200px,1fr) 1fr;
  //将容器分成2列,第一列设置宽度最小为200px,最大为1fr
}

图2-2(1).png (宽度最大1fr时) 图2-2(2).png (宽度最小200px时)

2.3 示例:fit-content( [ <length> | <percentage> ] )

<style type="text/css">
	.container {
	  display: grid;
	  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
	  grid-gap: 5px;
	  width: 100%;
	  background-color: #eee;
	  padding: 10px;
	}
	.container > div {
	  background-color: #ffc727;
	  padding: 5px;
	}
</style>
<div class="container">
  <div>内容不足300px,适应内容的宽度</div>
  <div>
    我这里内容比较多,超过300px了,但是我不能比设置的最大宽度300px更宽了。
  </div>
  <div>我就要剩下的了</div>
</div>

图2-3.png

grid-template-columns: <track-list> → <track-repeat>

where <track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

2.4 示例:(repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ))

第一个参数:规定应重复的数量,也就是分成几列; 第二个参数:规定分成的列的宽度;

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: repeat(3,1fr);
}

图2-4.png


grid-template-columns: <auto-track-list>

where <auto-track-list>= <fixed-list> <auto-repeat> <fixed-list>

where <fixed-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

where <auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

2.5 示例:grid-template-columns: <auto-track-list>

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: 1fr repeat(1, 100px) 2fr;
}

图2-5.png

3.网格间隙

grid-gap:<'grid-row-gap'> <'grid-column-gap'>?

第一个参数:行的间隙 第二个参数:列的间隙 3.1 示例:

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px 20px;
}

图3-1.png

4.通过网格线号定位

网格线本质上是表示列和行轨迹的开始,结束或之间的行。 从轨道开始和网格方向开始的每一行从1开始递增编号。

如图4-1.png,这个3x2网格可以生成4x3的网格线,里面的1,2,3,4,5,6块就根据这些网格线来进行定位; 图4-1.png

grid-row:<grid-line> [ / <grid-line> ]?

where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

grid-column:<grid-line> [ / <grid-line> ]?

where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

4.1 示例:

.item {  
    grid-row:2 / 3; 
    //将元素放在行的第2条和第3条网格线之间
    //列也是差不多的
}

图4-1.png

还可以实现跨行或列

.item{
    grid-column: 1 / 3;
}

图4-2.png

还可以使用span来实现跨行或列

.container{
    display: grid;
    border: 1px dashed gray;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 20px;
    //asd
}
.item1{
    grid-column: 1/span 3;
    //列的第1条网格线开始,跨3列
}
.item2{
  grid-row: 2/span 3;
  grid-column: 2/span 2;
  //等价于 grid-area: 2/ 2 / span 3 / span 2
}
<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

图4-3.png

5.隐式网格

使用grid-auto-rows, grid-auto-columns, grid-auto-flow 来设置隐式网格;

  • grid-auto-rows:<track-size>+ 设置隐含创建的网格行的大小
  • grid-auto-columns:<track-size>+ 设置隐含创建的网格列的大小轨道
  • grid-auto-flow:<track-size>+ 设置隐含创建的网格的默认流方向
.container {
  display: grid;
  grid-gap:5px;
  grid-template-rows: 70px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
  grid-auto-flow: row;
}

图5-1.png


CSS Grid
MDN

感谢您的阅读