1、Grid简介

• Grid Layout布局又称网格布局，是一种强大得布局模型，用于创建复杂得二维布局。它允许你将页面分成多个区域，并通过这些区域来放置内容。网格布局通过定义网格容器（grid container）和网格项（grid items）来实现，其中每个网格项可以被放置在网格得任何位置。 

 2、网格布局得基本概念

1. 网格容器（Grid Container）：

         使用display:grid;或display:inline-grid;属性将一个元素定义为网格容器。这个容器将成为所有网格项的直接父元素。

      2. 网格线（Grid Lines）:

          网格由水平和垂直的网格线组成。你可以通过这些线来定位网格项。 

      3. 网格轨道（Grid Tracks）：

          网格轨道是由相邻的网格线所定义的列或行。你可以控制每个轨道的大小。

      4. 网格项（Grid Items）：

          直接子元素成为网格项。可以通过grid-column和grid-row属性来定位这些项。

3、创建基本网格

 1. 定义网格容器

.grid-container {
    display: grid;
}

2. 定义网格轨道的大小

你可以通过grid-template-columns和grid-template-rows属性来定义列和行的尺寸。

.grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px; /*三列，宽度分别为100px，200px，100px*/
    grid-template-rows: 50px 150px; /*两行，高度分别为50px，150px*/
}

3. 放置网格项

你可以使用grid-column和grid-row属性来指定每个网格项应该跨越那些列和行。

.item {
    grid-column-start: 1;    /*开始于第一列*/
    grid-column-end: 3;      /*结束于第三列*/
    grid-row-start: 1;       /*开始于第一行*/
    grid-row-end: 3;         /*结束于第三行*/
}

4. 简写属性

为了简写代码，你可以使用grid-area属性一次性指定项的位置和大小：

.item {
    grid-area: 1 / 1 / span 2 / span 2;    /*从第一行第一列开始，跨域两行两列*/
}

 或者使用grid-column和grid-row的简写形式：

.item {
    grid-column: 1 / span2;    /*从第一列开始，跨越两列*/
    grid-row: 1 /span 2;       /*从第一行开始，跨域两行*/
}

4、自动布局（Auto Layout）

如果你不想明确指定每一行和每一列的大小，可以使用自动布局，让浏览器自动分配空间。这可以通过不设置grid-template-columns和grid-template-rows属性来实现，或者使用fr单位来分配剩余空间。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);     /*三列，每列占可用空间的等分*/
    grid-auto-rows: minmax(100px, auto);       /*行高至少为100px，根据内容自动调整*/
}

总结

css网格布局提供了非常灵活和强大的方式来设计复杂页面布局。通过合理使用网格线、轨道和项的定位属性，你可以创建响应式且易于维护的布局。随着你对网格布局的深入理解，你将能够创建更加复杂和动态的网页设计。