CSS笔记- grid 布局

JessieLi
35 阅读6分钟

网格是由一系列水平及垂直的线构成的一种布局模式，元素可以被放到行和列中。

grid.png

如上图所示，网格内容包括：

  • 行 ： 网格中的水平线
  • 列： 网格中的垂直线
  • 沟槽：行与行、列与列之间的间隙

网格容器（Grid Container）

定义网格

若只设置样式不会更改， 但是调试模式下会在容器上出现grid标识和线。

使用grid-template-rows和grid-template-columns设置网格的行或者列。设置方式如下（可混合使用）：

  • 长度
  • 百分比
  • fr单位
.container {
    display: grid;
}

长度或者百分比

使用长度或者百分比设置网格的行和列。

.container {
    display: grid;
    /* 使用长度 200px */
    grid-template-columns: 200px 200px 200px;
    /* 使用百分比 33% */
    grid-template-columns: 33% 33% 33%;
}

fr单位

使用fr设置网格的行和列，fr单位是一个长度单位，表示了可用空间的一个比例。

.container {
    display: grid;
    /* 三列：平分可用空间 */
    grid-template-columns: 1fr 1fr 1fr;
}

重复构建行/列

可以使用repeat来重复构建具有某些宽度配置的某些列。

.container {
    display: grid;
    /* 设置三列： 1fr 1fr 1fr */
    grid-template-columns: repeat(3, 1fr);
}

混合使用

几种设置方式可以混合使用

.container {
    display: grid;
    /* 设置四列： 200px 1fr 1fr 1fr */
    grid-template-columns: 200px repeat(2,1fr) 1fr;
}

网格间隙

网格间隙是元素之间的间距。

  • 使用 column-gap属性来定义列间隙
  • 使用 row-gap 来定义行间隙
  • 使用 gap可以同时设定两者
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 20px;
    column-gap: 10px;
    gap: 20px;
}

隐式网格

当有内容被放到网格外时才会生成的网格，大小根据内容自动调整。

  • 默认参数是auto
  • 使用 grid-auto-rows 设置行大小，grid-auto-columns 设置列大小
  • 使用grid-template-columns和 grid-template-rows 定义的是显式网格
.wrapper-implicit {
    display: grid;
    gap: 10px;
    /* 显式设置的 3列1行：每行100px， 每列1fr */
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 100px;
    /*隐式设置 网格的大小150 */
    grid-auto-rows: 150px;
}

可使用 minmax（）函数为一个行/列的尺寸设置了取值范围。

.wrapper {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3,1fr);
    /*隐式设置 网格的大小最小50px，最大自己填充 */
    grid-auto-rows: minmax(50px, auto);
}

grid-auto-flow

设置网格的自动流动方向。

  • 默认是row，通过依次填充每行来放置项目，并根据需要添加新行
  • 设置为column，通过依次填充每列来放置项目，并根据需要添加新列
  • 设置dense, 在网格中更早地填充孔,填充前面的空白
.wrapper-flow {
    display: grid;
    gap: 10px; 
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: 100px;
    grid-auto-flow: row dense;
}

网格项（Grid Cell）

网格项是网格布局中最小的单位。

网格线

网格线是在使用网格布局的时候用来定义的轨道的。

  • 第一条线的起始点与文档书写模式相关
  • 可以根据网格线的编号进行网格项定位
  • 网格线可以被命名
.wrapper {
    display: grid;
    gap: 10px;
    /*grid-template-columns: repeat(3,1fr);*/
    grid-template-columns:[col1-start] 1fr [col2-start]1fr [col3-start]1fr;
    grid-auto-rows: minmax(50px, auto);
}

定位网格

网格项通过网格线来定位。通过以下属性来指定从那条线开始到哪条线结束。

  • grid-column-start 定义列开始位置
  • grid-column-end 定义列结束位置
  • grid-row-start 定义行开始位置
  • grid-row-end 定义行结束位置
  • grid-column 列位置简写属性 start/end
  • grid-row 行位置简写属性 start/end

grid-column-start

grid-column-start是用来标明网格开始的列的位置。

  • 可以使用编号、命名和span跨度使用
  • 不给定值则使用automatic
.lines-item1 {
    /* 从编号1的线开始*/
    grid-column-start: 1;
    /* 从col1-start的线开始*/
    grid-column-start: col1-start;
    /* 从grid-column-end的线跨度 2*/
    grid-column-start: span 2;
    /* 从grid-column-end的线跨度到 col2-start*/
    grid-column-start: span col2-start;
    
    grid-column-end: col2-start;
    grid-row-start: 1;
    grid-row-end: 2;
}

grid-column-end

grid-column-end 是用来标明网格结束的列的位置。

  • 可以使用编号、命名和span跨度使用
  • 不给定值则使用automatic
.lines-item1 {
    grid-column-start: 1;
    
    /* 到编号2的线结束*/
    grid-column-end: 2; 
    /* 到col3-start的线结束*/
    grid-column-end: col3-start; 
    /* 从grid-column-start的线跨度3个网格 */
    grid-column-end: span 3;
    /* 从grid-column-start的线跨度到 col3-start*/
    grid-column-end: span col3-start;
    
    grid-row-start: 1;
    grid-row-end: 2;
}

grid-column

grid-column 是 grid-column-start 和 grid-column-end 的简写属性。写法为：grid-column-start/grid-column-end。

.lines-item1 {
    grid-column: 1 / 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

grid-row-start

grid-row-start是用来标明网格开始的行的位置。

  • 可以使用编号、命名和span跨度使用
  • 不给定值则使用automatic
.lines-item1 {
    grid-column: 1 / 2;
   
    /* 从编号1的线开始*/
    grid-row-start: 1;
    /* 从col1-start的线开始*/
    grid-row-start: col1-start;
    /* 从grid-row-end的线跨度 2*/
    grid-row-start: span 2;
    /* 从grid-row-end的线跨度到 col2-start*/
    grid-row-start: span col2-start;
    
    grid-row-end: 2;
}

grid-row-end

grid-row-end 是用来标明网格结束的行的位置。

  • 可以使用编号、命名和span跨度使用
  • 不给定值则使用automatic
.lines-item1 {
    grid-column-start: 1;
    grid-column-end: 2; 
    
    grid-row-start: 1;
    /* 到编号2的线结束*/
    grid-row-end: 2; 
    /* 到col3-start的线结束*/
    grid-row-end: col3-start; 
    /* 从grid-row-start的线跨度3个网格 */
    grid-row-end: span 3;
    /* 从grid-row-start的线跨度到 col3-start*/
    grid-row-end: span col3-start; 
}

grid-row

grid-row 是 grid-row-start 和 grid-row-end 的简写属性。写法为：grid-row-start/grid-row-end。

.lines-item1 {
    grid-column: 1 / 2;
    grid-row: 1/2;
}

网格区域（Grid areas）

项可以按行或按列跨越一个或多个单元格，这将创建一个网格区域。

  • 给每个网格项设置 grid-area
  • 在容器中根据设置 grid-areas, 填充网格项
  • 对应的位置没有网格项的时候使用.替代
.wrapper-areas {
    background-color: var(--bg-color);
    display: grid; 
    gap: 10px;
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "item1  . item2"
    "item3  item4 item5";
}

.areas-item1 {
    grid-area: item1;
}

.areas-item2 {
    grid-area: item2;
}

.areas-item3 {
    grid-area: item3;
}

.areas-item4 {
    grid-area: item4;
}
.areas-item5 {
    grid-area: item5;
}

网格嵌套（ Nesting grids) ）

网格可以嵌套另一个网格。

.wrapper-nest {
    background-color: var(--bg-color);
    display: grid; 
    gap: 10px;
    grid-template-columns: 150px 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.nest-item1 {
    grid-column: 1 / 5;
    /*嵌套的网格，网格项设置 display: grid;*/
    display: grid;
}
avatar
文章
阅读
粉丝