CSS基础知识——栅格系统

2024-01-23 08:10:04

栅格系统

如何设置栅格容器

  • 把元素的display赋值 grid 或 inline-grid ，便能把元素变成容器。
<style>
 main {
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      display: grid;
      grid-template-rows: 100px 100px;
      grid-template-columns: 100px 100px;
    }
 </style>

在这里，main 元素被设置成了栅格容器，如下图所示。图中虚线称为栅格线，栅格线围成的单元格称为栅格。
CSS基础知识——栅格系统

如何绘制栅格

固定绘制栅格结构

  • grid-template-rows 绘制栅格行
  • grid-template-columns 绘制栅格列

已知 宽高为 200px*200px的栅格容器main。想在容器中绘制 4 个的栅格。

<style>
 main {
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      display: grid;
      grid-template-columns: 50px 50px 50px 50px;
    }
 </style>

4 个50px*200px的栅格 【只绘制了列栅格线】
CSS基础知识——栅格系统

<style>
    main {
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      display: grid;
      grid-template-rows: 50px 50px;
      grid-template-columns: 50px 50px;
    }
  </style>

4个50px*50px的栅格 【同时绘制了行栅格线和列栅格线】

CSS基础知识——栅格系统

Note:
     1，grid-template-rows和grid-template-columns分别是绘制行栅格线和列栅格线的。参数的个数就代表绘制的行数和列数，参数值得大小就代表栅格的高和宽。
      2，grid-template-rows和grid-template-columns的值除了可以写成像素值外还可以写成百分比。【写成百分比时的参照物是栅格容器，在这里的例子中也就是main元素】
例：对于4个50px*50px的栅格来说，代码还可以是grid-template-rows: 25% 25%; grid-template-columns: 25% 25%;

重复绘制栅格结构

  • grid-template-rows:repeat() 重复绘制行栅格线
  • grid-template-columns:repeat() 重复绘制列栅格线

repeat()函数的参数形式：
     1，repeat(1,50px) 第一个参数是重复的次数即1次，第二个参数是绘制行（或列）的高度（或宽度）即50px。
     2，repeat(2,50px 100px) 第一个参数是重复的次数即2次，第二个参数是绘制行（或列）的高度（或宽度）即一个为 50px 一个为100px。【第二个参数的个数可以是多个，参数的个数代表要绘制的行栅格线或列栅格线的个数，参数的值代表行栅格线的高度或列栅格线的宽度】
Note: 第二个参数值除了是像素还可以是百分比的形式。

<style>
main {
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      display: grid;
      grid-template-rows: repeat(2,20px 50px);
      grid-template-columns: repeat(2,20px 50px);
    }
</style>

下图显示结果：表示行栅格线和列栅格线都绘制了两次，每一次都绘制了两行两列。
CSS基础知识——栅格系统

自动填充与按比例划分栅格

已知容器的宽高 例：300px*300px

自动填充栅格

  • grid-template-rows:repeat(auto-fill,100px)
  • grid-template-columns:repeat(auto-fill,100px)

代码分析：自动填充栅格，每100px为一份

按比例划分栅格

  • grid-template-rows: 1fr 2fr 3fr;
  • grid-template-columns:1fr 2fr 3fr;

注意：1fr 类似于弹性盒模型中的 flex:1;

如何在栅格中放置元素

根据栅格编号放置元素

在这里我们需要知道，对于栅格线，浏览器在他们刚被绘制出来的时候对他们进行编号。如下所示：
对于行栅格线来说，从上到下进行的编号是正数，从下到上进行的编号是负数。
对于列栅格线来说，从左到右进行的编号是正数，从右到左进行的编号是负数。
CSS基础知识——栅格系统

  • grid-row-start 元素放置栅格的行起始编号
  • grid-row-end 元素放置栅格的行结束编号
  • grid-column-start 元素放置栅格的列起始编号
  • grid-column-end 元素放置栅格的列结束编号

例：把div放置在右下角的栅格中，可以写成：

<style>
    main {
      width: 200px;
      height: 200px;
      background-color: rosybrown;
      margin: 100px auto;
      display: grid;
      grid-template-rows: repeat(2,20px 50px);
      grid-template-columns: repeat(2,20px 50px);
    }
    main div {
      background-color: royalblue;
      grid-row-start: 4;
      grid-column-start: 4;
      grid-row-end: 5;
      grid-column-end: 5;

    }
  </style>
  
  <main>
    <div></div>
  </main>

结果：
CSS基础知识——栅格系统

还可以改写为：grid-row-start: -1; grid-column-start: -1; grid-row-end: -2; grid-column-end: -2;

栅格固定命名放置元素

  • grid-template-rows:[r1-s] 100px [r1-e r2-s] 100px [r2-e r3-s] 100px [r3-e];
  • grid-template-columns:[c1-s] 100px [c1-e c2-s] 100px [c2-e c3-s] 100px [c3-e];

格式说明：
第一条行栅格线的名字为 r1-s 第二条行栅格线的名字为r1-e/r2-s，以此类推。
第一条列栅格线的名字为 c1-s 第二条列栅格线的名字为c1-e/c2-s，以此类推。

效果演示：

<style>
    main {
      width: 300px;
      height: 300px;
      background-color: rosybrown;
      margin: 100px auto;
      display: grid;
      grid-template-rows: [r1-s] 100px [r1-e r2-s] 100px [r2-e r3-s] 100px [r3-e];
      grid-template-columns: [c1-s] 100px [c1-e c2-s] 100px [c2-e c3-s] 100px [c3-e];
    }
    main div {
      background-color: royalblue;
      grid-row-start: r2-s;
      grid-column-start: c2-s;
      grid-row-end: r2-e;
      grid-column-end: c2-e;

    }
  </style>

  <main>
    <div></div>
  </main>

CSS基础知识——栅格系统

重复栅格的命名技巧

  • grid-template-rows:repeat(3,[r-s] 1fr [r-e])；
  • grid-template-columns:repeat(3，[c-s] 1fr [c-e])；

代码解释：
第一条行栅格线的名字是 r-s 1，第二条行栅格线的名字是 r-s 2/r-e 1 以此类推。
第一天列栅格线的名字是c-s 1，第二条列栅格线的名字是c-s 2/c-e 1 以此类推。
如下图所示：
CSS基础知识——栅格系统

根据偏移量部署元素

  • span 数值 ；表示偏移量。
    代码展示：
<style>
    main {
      width: 300px;
      height: 300px;
      background-color: rosybrown;
      margin: 100px auto;
      display: grid;
      grid-template-rows: repeat(3,1fr);
      grid-template-columns: repeat(3,1fr);
    }
    main div:nth-child(1){
      background-color: royalblue;
      grid-row-end: span 1;
      grid-column-end: span 3;

    }
    main div:nth-child(2){
      background-color:salmon;
      grid-row-start:2;
      grid-column-start: 2;
      grid-row-end: span 1;
      grid-column-end:  span 2;
    }
    main div:nth-child(3){
      background-color:springgreen;
      grid-row-start: 3;
      grid-column-start: 2;
      grid-row-end: span 1;
      grid-column-end: span 1;
    }
  </style>

  <main>
    <div></div>
    <div></div>
    <div></div>
  </main>

效果展示：
CSS基础知识——栅格系统

元素定位简写操作

  • grid-row: 元素开始的行栅格的开始编号/元素结束的行栅格的结束编号
  • grid-column: 元素开始的列栅格的开始编号/元素结束的列栅格的结束编号

例：
代码展示：

<style>
    main {
      width: 300px;
      height: 300px;
      background-color: rosybrown;
      margin: 100px auto;
      display: grid;
      grid-template-rows: repeat(3,1fr);
      grid-template-columns: repeat(3,1fr);
    }
    main div:nth-child(1){
      background-color: royalblue;
      grid-row:1/2;
      grid-column:1/4;

    }
    main div:nth-child(2){
      background-color:salmon;
      grid-row:2/3;
      grid-column:2/4;
    }
    main div:nth-child(3){
      background-color:springgreen;
      grid-row:3/4;
      grid-column:3/4;
    }
  </style>
  
  <main>
    <div></div>
    <div></div>
    <div></div>
  </main>

效果展示：
CSS基础知识——栅格系统

使用区域定位的方式

  • grid-template-areas 给区域命名
  • grid-area:区域名

给栅格进行如下形式的命名：

CSS基础知识——栅格系统

grid-template-areas: "header header" "nav main" "footer footer";

对于命名后的栅格，浏览器会自动给其栅格线进行命名。如上述命名后，第一条行栅格线的名字是header-start,第二条行栅格线的名字是header-end；以此类推。

然后根据区域布局元素的结构：

<style>
    main {
      width: 300px;
      height: 400px;
      background-color: rosybrown;
      margin: 100px auto;
      display: grid;
      grid-template-rows: 60px 1fr 60px;
      grid-template-columns: 60px 1fr;
      grid-template-areas: "header header" "nav main" "footer footer";
    }
   main div:nth-child(1){
     background:springgreen;
     grid-area: header;
   }
   main div:nth-child(2){
     background:blueviolet;
     grid-area: nav;
   }
   main div:nth-child(3){
     background:pink;
     grid-area: main;
   }
   main div:nth-child(4){
     background:skyblue;
     grid-area: footer;
   }
  </style>
  <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </main>

效果展示：
CSS基础知识——栅格系统
使用区域占位符优化布局代码

当多个栅格独立存在时可以使用占位符(“.”),对于要变成一体的需要命名且名字一样

针对于上述根据区域布局元素的结构可以优化成:

<style>
    main {
      width: 300px;
      height: 400px;
      background-color: rosybrown;
      margin: 100px auto;
      display: grid;
      grid-template-rows: 60px 1fr 60px;
      grid-template-columns: 60px 1fr;
      grid-template-areas: "header header" ". ." "footer footer";
    }
   main div:nth-child(1){
     background:springgreen;
     grid-area: header;
   }
   main div:nth-child(2){
     background:blueviolet;
   }
   main div:nth-child(3){
     background:pink;
   }
   main div:nth-child(4){
     background:skyblue;
     grid-area: footer;
   }
  </style>

  <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </main>

结果展示:
CSS基础知识——栅格系统
使用栅格区域部署元素

  • grid-area:行栅格线开始编号/列栅格线开始编号/行栅格线结束编号/列栅格线结束编号

栅格样式的处理

栅格排布方式

  • grid-auto-flow 可选值 row 和column。默认是row

默认情况下，栅格的排布：
CSS基础知识——栅格系统
grid-auto-flow:column的效果

CSS基础知识——栅格系统

栅格整体对齐方式处理

已知容器的空间大于栅格空间且栅格的排列方式是默认值

  • 控制栅格水平方向上的排列方式 justify-content
  • 控制栅格垂直方向上的排列方式 align-items

justify-content和 align-items的可选值和作用效果和Flex弹性盒模型的使用方法一样。可以参考Flex弹性盒模型知识点

简写组合方式： place-content: align-items justify-content;

栅格内元素的整体控制

  • 水平方向上 justify-items 【可选值：start，end，center，stretch（默认值）】
  • 垂直方向上 align-items【可选值：start，end，center，stretch（默认值）】

简写组合方式： place-items: align-items justify-items;

栅格内元素的独立控制

  • 水平方向上 justify-self 【可选值：start，end，center，stretch（默认值）】
  • 垂直方向上 align-self【可选值：start，end，center，stretch（默认值）】

简写组合方式： place-self: align-self justify-self;

Note:
     1，栅格只是布局页面的区间，元素的样式仍需要根据之前学的知识点进行设置
     2，栅格内是放置元素的，当不给元素设置宽高时，元素自动充满栅格。
     3，一个页面不仅仅只使用一个栅格，所以给栅格命名的时候不能重复。

设置栅格间距

  • row-gap 栅格的行间距
  • columns 栅格的列间距

简写组合方式： gap:row-gap column-gap;

知识补充：
使用minmax函数控制栅格尺寸的波动
grid-template-rows:repeat(2,minmax(50px,100px)) 代码解析：当容器height发生变化时，栅格的height也会跟着变化，最小取值为50px，最大取值为100px。

上一篇：leetcode64.最小路径和


下一篇：LeetCode 1034:边界着色