CSS Grid 制作表格並合並單元格

一、概述

1.1、Grid是什么？

網格布局（Grid）是最強大的 CSS 布局方案。

它將網頁划分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過復雜的 CSS 框架達到的效果，現在瀏覽器內置了。

2.2、Grid和Flex的區別？

Grid 布局與 Flex 布局有一定的相似性，都可以指定容器內部多個項目的位置。但是，它們也存在重大區別。

Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器划分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。Grid 布局遠比 Flex 布局強大。

 Flex 布局是軸線布局，只能指定"項目"針對軸線的位置，可以看作是一維布局。Grid 布局則是將容器划分成"行"和"列"，產生單元格，然后指定"項目所在"的單元格，可以看作是二維布局。Grid 布局遠比 Flex 布局強大。

span {
font-size: 2em;
}

#container{
  display: grid;
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
}

.item {
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

 <h2>CSS Grid 網格布局教程</h2>
    <hr>
    <span>foo</span>
    <div id="container">
      <div class="item item-1">1</div>
      <div class="item item-2">2</div>
      <div class="item item-3">3</div>
      <div class="item item-4">4</div>
      <div class="item item-5">5</div>
      <div class="item item-6">6</div>
      <div class="item item-7">7</div>
      <div class="item item-8">8</div>
      <div class="item item-9">9</div>
    </div>
    <span>bar</span>

 

grid-auto-flow 屬性
划分網格以后，容器的子元素會按照順序，自動放置在每一個網格。默認的放置順序是"先行后列"，即先填滿第一行，再開始放入第二行，即下圖數字的順序。
grid-auto-flow: row情況下，會產生下面這樣的布局。

#container{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: row;
}

.item {
  font-size: 4em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.item-1 {
  background-color: #ef342a;
  grid-column-start: 1;
  grid-column-end: 3;  
}

.item-2 {
  background-color: #f68f26;
  grid-column-start: 1;
  grid-column-end: 3; 
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

<div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
  <div class="item item-8">8</div>
  <div class="item item-9">9</div>
</div>

二、項目實例：

2.1、實際案例應用

實現如下設計圖

父組件

 constructor (props) {
    super(props)
    this.state = {
      infoList:[
        {name:'商品名稱', value: '18k今伯爵石英女表' },{name:'表盤顏色', value: '銀色' },
        {name:'表盤材質', value: 'K金' },{name:'表盤形狀', value: '方形' },
        {name:'表徑', value: '29mm' },{name:'表鏡材質', value: '藍寶石' },
        {name:'表帶材質', value: '鱷魚皮' },{name:'手表簡單功能', value: '五秒針' },
        {name:'系列', value: 'POSSESSION' },{name:'成色分級', value: 'AB已使用' },
        {name:'配件', value: '配盒' },
      ]
     
    }
  }

render () {
  const { infoList } = this.state
  return (
      <View className='mj-evaluate'>
        <View  className='mj-evaluate-bg'>
          <View className='mj-evaluate-bg-number'>NO.{resultData.orderNo}</View>
          <View className='mj-evaluate-bg-title'>
            <Text className='mj-evaluate-bg-title-main'>鑒定評估報告</Text>
            <Text className='mj-evaluate-bg-title-sub'>（{resultData.categoryName}）</Text>
          </View>
         <ProductInfo dataList={infoList}></ProductInfo>
        </View>
      </View>
    )
  }

子組件：

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.scss'

class ProductInfo extends Component {
   

  render () {
    const { dataList } = this.props
   return (
        <View className='mj-evaluate'>
            <View className='mj-evaluate-bg-info'>
                {
                   dataList&&dataList.map((item) => {
                   return (
                    <Text className='mj-evaluate-bg-info-desc' key={item.id}>
                        <Text className='mj-evaluate-bg-info-desc-title'>{item.name}/</Text> 
                        <Text className='mj-evaluate-bg-info-desc-text'>{item.value}</Text> 
                    </Text>)
                           
                  })
                }
            </View>
         
        </View>
    )
  }
}

export default ProductInfo

index.scss

.mj-evaluate-bg-info{
    margin-top: 30px;
    display: grid;
    grid-row-gap: 15px;
    grid-column-gap: 15px;
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: row;
    &-desc{
        font-size: 24px;
        color: #1a1a1a;
      
        &-title{
            font-size: 24px;
            color: #999;
        }
        &-text{
            font-size: 24px;
            margin-left: 10px;
            color: #1a1a1a;
           
        }
    }
    &-desc:nth-of-type(1){
        grid-column-start: 1;
        grid-column-end: 3;  
    }
    &-desc:nth-of-type(2){
      
    }
   
    &-desc:nth-child(odd){
        color: #999;
     
    }
    &-desc:nth-child(even){
        color: #1a1a1a;
    }
    
}

 附grid鏈接:

阮一峰  CSS Grid 網格布局教程:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html