阅读 5022

CSS Grid 网格布局

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

1. 网格容器

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

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

.container{
    display: grid;
    border: 1px dashed gray;
}复制代码

图1-1.png
图1-1.png

display: inline-grid

.container{
    display: inline-grid;
    border: 1px dashed gray;
}复制代码

图1-2.png
图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.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(1).png (宽度最大1fr时)

图2-2(2).png (宽度最小200px时)
图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
图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
图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
图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
图3-1.png

4.通过网格线号定位

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

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

图4-1.png
图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
图4-1.png

还可以实现跨行或列

.item{
    grid-column: 1 / 3;
}复制代码

图4-2.png
图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
图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
图5-1.png


CSS Grid
MDN
感谢您的阅读

关注下面的标签,发现更多相似文章
评论