CSS基础知识——栅格系统

如何设置栅格容器

• 把元素的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 元素被设置成了栅格容器，如下图所示。图中虚线称为栅格线，栅格线围成的单元格称为栅格。

如何绘制栅格

固定绘制栅格结构

• 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的栅格 【只绘制了列栅格线】

<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的栅格 【同时绘制了行栅格线和列栅格线】

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