CSS grid布局

    display: grid;

   .一 ：grid-template-columns 属性用于设置网格的列数和列的大小。grid-template-columns: repeat(10,1fr);

     1.grid-template-columns:50px 100px;
      这将创建一个两列的网格，第-列宽 50px，第二列宽 100px。

    2.grid-template-columns: repeat(3,100px);
     这将创建一个三列的网格，每列宽100px。

    3.设置自动填充 :通过 auto-fil 关键字,可以让网格尽量容纳更多的单元格例如:
CSS
grid-template-columns: auto-fill:
这将根据内容自动填充网格的列数和大小。

4.使用fr 单位 :fr 单位代表网格容器中可用空间的一等份。通过指定 fr 值可以定义每列的大小。例如:

grid-template-columns: 200px 1fr 2fr;
这将创建一个三列的网格，第一列宽 200px，剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3。

    5.设置最小和最大内容大小:可以使用 min-content 和 max-content 关键字来根据内容设置列的最小和最大大小。例如:
CsS
grid-template-columns:min-content max-content:
这将根据内容的最小和最大大小来设置列的大小。
6.设置默认值:如果不设置 grid-template-columns 属性，则默认值为 auto即根据内容和元素大小自动设置列的大小。
7.继承父元素的属性值:可以通过指定inherit 值来继承父元素的grid-template-columns属性值。例如:

grid-template-columns: inherit;
这将使当前元素的网格列属性继承自其父元素，
8.使用别名:可以使用别名来定义网格单元的名称，以便在布局中引用。例如:
CSS
grid-template-columns: [c1]200px [c2]200px[c3] 1fr [c4];这将为网格单元创建别名 c1、c2、c3 和 c4，并设置相应的列大小。9.对齐子元素:通过 justify-items 属性，可以控制子元素在网格单元格内的对齐方式。例如:
CsS
justify-items: center;
这将使子元素在单元格内居中对齐
10.自动分配剩余空间:使用repeat()函数和fr 单位，可以自动分配剩余空间给网格的列。例如:
Css
grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
这将自动创建足够的列来适应内容，每列的大小至少为100px，最多为可用空间的 1/3。

二：2.grid-gap设置网格行和列之间的间隙大小

  grid-gap:3px;

三：grid-template-rows 属性用于设置网格的行数和行的大小。

  grid-template-rows: repeat(5,1fr);