grid绘制各种表格 合并行 合并列

Grid 是一个强大的 CSS 布局系统，可以方便地实现复杂的网格布局。

Grid 最常用于有规律的网格布局，可以根据需要定义行和列，指定每个单元格的大小和位置，并支持响应式网格布局。

下面列出了一些常用的 Grid 属性：

1. display: grid;
   这是用于创建Grid布局的基础属性，它会把父级容器转换为一个网格容器。在网格容器中，每一个子元素都是一个网格项目。
2. grid-template-columns 和 grid-template-rows
   这两个属性定义了网格容器的行和列的数量和大小。
3. grid-column-gap 和 grid-row-gap
   这两个属性定义了网格容器中列和行之间的间隔。
4. grid-template-areas
   这个属性允许你通过命名网格元素来定义整个网格布局。
5. grid-column 和 grid-row
   这两个属性指定一个网格项目从哪一行或哪个列开始，它们也可以用于合并单元格。
6. grid-area
   这个属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的一个缩写，它可以更方便地指定网格项目的位置。

Grid 布局常用于以下场景：

1. 媒体网站：可以使用网格布局创建多个栏目，并在不同的屏幕尺寸下自动调整布局。
2. 图片网格：可以使用 Grid 布局创建一个互动型的图片墙，让用户可以流畅地浏览大量的图像。
3. 表单布局：表单通常有多个输入字段，使用 Grid 布局可以轻松地将它们分布在网格上。
4. 菜单和导航：可以使用网格布局创建菜单和导航，使其在各种屏幕尺寸中自动适应。

基础4行4列

HTML

const table: React.FunctionComponent<tableProps> = (props) => {
   return (
      <div className={styles['grid-container']} >
         <div className={styles['grid-container']} >
            <div className={styles['grid-item']} >1</div>
            <div className={styles['grid-item']}>2</div>
            <div className={styles['grid-item']}>3</div>
            <div className={styles['grid-item']}>4</div>
            <div className={styles['grid-item']}>5</div>
            <div className={styles['grid-item']}>6</div>
            <div className={styles['grid-item']}>7</div>
            <div className={styles['grid-item']}>8</div>
            <div className={styles['grid-item']}>9</div>
            <div className={styles['grid-item']}>10</div>
            <div className={styles['grid-item']}>11</div>
            <div className={styles['grid-item']}>12</div>
            <div className={styles['grid-item']}>13</div>
            <div className={styles['grid-item']}>14</div>
            <div className={styles['grid-item']}>15</div>
            <div className={styles['grid-item']}>16</div>
         </div>
      </div>

   );
};

CSS

.grid-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(4, 1fr);
   grid-gap: 0;
}

.grid-item {
   border-bottom: 1px solid #ccc;
   text-align: center;
   color: #333;
   padding: 10px;
}

.grid-item:nth-child(even) {
   background-color: white;

}

.grid-item:nth-child(odd) {
   background-color: #f2f2f2;
}


.grid-item:nth-child(4n+1),
.grid-item:nth-child(4n+3) {
   background-color: #f2f2f2;
}

.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3),
.grid-item:nth-child(4) {
   border-top: 1px solid #ccc;
}

效果图

合并第4行 234列

方法： 给14样式修改并去掉15 16

HTML

const table: React.FunctionComponent<tableProps> = (props) => {
   return (
      <div className={styles['grid-container']} >
         <div className={styles['grid-item']} >1</div>
         <div className={styles['grid-item']}>2</div>
         <div className={styles['grid-item']}>3</div>
         <div className={styles['grid-item']}>4</div>
         <div className={styles['grid-item']}>5</div>
         <div className={styles['grid-item']}>6</div>
         <div className={styles['grid-item']}>7</div>
         <div className={styles['grid-item']}>8</div>
         <div className={styles['grid-item']}>9</div>
         <div className={styles['grid-item']}>10</div>
         <div className={styles['grid-item']}>11</div>
         <div className={styles['grid-item']}>12</div>
         <div className={styles['grid-item']}>13</div>
         <div className={`${styles['grid-item']} ${styles['merge']}`}>14</div>
      </div>

   );
};

CSS

.merge {
   grid-column-start: 2;
   grid-column-end: 5;
}

效果图

合并列

HTML

const table: React.FunctionComponent<tableProps> = (props) => {
   return (
      <div className={styles['grid-container']} >
         <div className={`${styles['grid-item']} ${styles['merge-row']}`} >1</div>
         <div className={styles['grid-item']}>2</div>
         <div className={styles['grid-item']}>3</div>
         <div className={styles['grid-item']}>4</div>
         <div className={styles['grid-item']}>5</div>
         <div className={styles['grid-item']}>6</div>
         <div className={styles['grid-item']}>7</div>
         <div className={styles['grid-item']}>8</div>
         <div className={styles['grid-item']}>9</div>
         <div className={styles['grid-item']}>10</div>
         <div className={styles['grid-item']}>11</div>
         <div className={styles['grid-item']}>12</div>
         <div className={styles['grid-item']}>13</div>
         <div className={styles['grid-item']}>14</div>
         <div className={styles['grid-item']}>15</div>
      </div>
   );
};

CSS

.merge-row {
   grid-row-start: 1;
   grid-row-end: 3;
}

效果图