CSS Grid create a table and merge cells

I. Overview
Grid Layout (Grid) is the most powerful CSS layout scheme.

It is divided into a web page grids can be any combination of different grid, make a variety of layouts. Previously, only through complex CSS framework to achieve the effect, now built into the browser.
Such a layout diagram, is champions Grid layout.

Flex Grid layout and the layout have some similarities, you can specify the location of a plurality of items inside the container. However, they also present significant difference.

Flex layout is the axis of the layout, you can only specify "project" for the position of the axis, it can be seen as unidimensional. Grid layout container sucked into "row" and "column" generation cell, then specify "Project" cells, it can be seen as a two-dimensional layout. Grid layout powerful than the Flex layout.

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 properties
after meshing, the child elements in the order in the container, automatically placed in each mesh. The default order is placed "the first row", i.e. to fill the first row, then into the second line begins, i.e. the sequence number in FIG.
grid-auto-flow: where the row, will have such a layout below.

#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>

Project examples:

Parent component

constructor (The props) { 
    Super (The props) 
    the this .STATE = { 
      infolist: [ 
        {name: 'Product Name', value: '18k quartz female form this Count'}, {name: 'Dial Color', value: 'silver' }, 
        {name: 'dial material', value: 'K gold'}, {name: 'Face shape', value: 'square' }, 
        {name: 'table diameter', value: '29mm'} , {name : 'table mirror material', value: 'sapphire' }, 
        {name: 'strap material', value: 'alligator'}, {name: "a simple function watch ', value:' five seconds' }, 
        {name : 'series', value:' POSSESSION '} , {name:' color grade ', value:' AB used ' }, 
        {name: 'Accessories', value: 'box with' }, 
      ], 
      PROLIST: [],  
      resultData: {}
    } 
  }

render () {

    const { infoList, resultData } = this.state
    //  console.log('99999----', resultData.tagList)

    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>
          {/* resultData.tagList */}
          <ProductInfo dataList={infoList}></ProductInfo>
          
        
        </View>
      </View>
    )
  }

Subassembly:

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

class ProductInfo extends Component {
   

  render () {
    const { dataList } = this.props
    console.log('--7777-dataList---',  dataList ) 
    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;
        // background-color: red;
        &-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;
    }
    
}

CSS Grid create a table and merge cells

Guess you like