CSS Grid

<style>
    .my-grid .container{
        font-size:12px;
        display:grid;
        max-width: 80%;
        margin:0 auto;
        grid-gap: 20px 20px;
        grid-template-columns: minmax(100px, auto) minmax(150px, auto) repeat(3, minmax(75px, auto)) minmax(150px, auto)
    }
    .my-grid section{
        background: #eee;
        border:1px solid #999;
        border-radius: 3px;
    }
    .my-grid .phase{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .my-grid h3{
        margin:0;
    }
    .my-grid p{
        margin:0;
    }
    .my-grid .section-title{
        display: flex;
        justify-content: center;
        height:40px;
        align-items:center;
    }
    .my-grid .methods{
        background:lightgreen;
        border: 1px solid green;
        border-radius: 3px;
        margin: 0 15px;
        text-align:center;
        padding: 10px 8px;
    }
    .my-grid .uitem{
        margin:0 15px;
        padding: 10px 0px;
        text-align: center;
    }
    .my-grid .rowline{
        height:0;
        border:0;
        border-bottom:1px solid #333;
    }
    .my-grid .columnline{
        border:0;
        width:0;
        border-right:1px solid #333;
        position:relative;
        margin: -20px auto -10px 50%;
    }
    .my-grid .columnline.down:after{
        content: "";
        display: block;
        position: absolute;
        bottom: -5px;
        left: -3px
    }
    .my-grid .columnline.down:after{
        width: 7px;
        height: 10px;
        background: #333;
        clip-path: polygon(0 0,100% 0,50% 100%);
    }
    .my-grid .dashed{
        border-style: dashed;
    }
    .my-grid .solid{
        border-style: solid;
    }
    .my-grid .constructor{
        background:lightskyblue;
    }
    .my-grid .render{
        background: skyblue;
    }
    .my-grid .updates{
        background:lightyellow;
    }
    .my-grid .section-white{
        background:white;
        border:1px solid #999;
        border-top-color:#ddd;
        border-radius: 3px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
</style>
 
 
 
```html
<div class='my-grid' style="margin:50px auto;">
<div class="container">
        <section class="s1" style="grid-area:1/2/span 14/span 1;"></section>
        <section class="s2" style="grid-area:1/3/span 14/span 3;"></section>
        <section class="s3" style="grid-area:1/6/span 14/span 1;"></section>
        <div class="section-white s1" style="grid-area:8/2/span 7/span 1"></div>
        <div class="section-white s2" style="grid-area:8/3/span 7/span 3"></div>
        <div class="section-white s3" style="grid-area:8/6/span 7/span 1"></div>
 
        <div class="phase" style="grid-area:3/1/span 6/auto;">
            <h3>Render phase</h3>
            <p>Pure and has no side effects,May be paused, aborted or restarted by React.</p>
        </div>
        <div class="phase" style="grid-area:9/1/span 6/auto;">
            <h3>Commit phase</h3>
            <p>Can work with DOM,run side effects, schedule updates</p>
        </div>
        <h3 class="section-title" style="grid-area:1/2/auto/span 1">Mounting</h3>
        <h3 class="section-title" style="grid-area:1/3/auto/span 3">Updating</h3>
        <h3 class="section-title" style="grid-area:1/6/auto/span 1">Unmounting</h3>
 
        <div class="rowline line1 dashed" style="grid-area:8/1/span 1/1"></div>
 
        <!---mount 箭头-->
        <div class="columnline s1 l1 dashed down" style="grid-area:2/2/3/span 1"></div>
        <div class="columnline s1 l2 dashed down" style="grid-area:5/2/6/span 1"></div>
        <div class="columnline s1 l3 dashed down" style="grid-area:8/2/9/span 1"></div>
        <div class="columnline s1 l4 solid down" style="grid-area:11/2/12/span 1"></div>
 
        <!---updating 箭头-->
        <div class="columnline s2 l5 dashed down" style="grid-area:5/3/6/span 1"></div>
        <div class="columnline s2 l6 dashed down" style="grid-area:5/4/6/span 1"></div>
        <div class="columnline s2 l7 dashed down" style="grid-area:5/5/6/span 1"></div>
        <div class="columnline s2 l8 dashed down" style="grid-area:8/4/9/span 1"></div>
        <div class="columnline s2 l9 solid down" style="grid-area:11/4/12/span 1"></div>
 
        <!---unmounting 箭头-->
        <div class="columnline s3 l9 dashed down" style="grid-area:2/6/12/span 1"></div>
 
        <div class="methods" style="grid-area:12/2/span 2/span 1">component&shy;Did&shy;Mount</div>
        <div class="methods" style="grid-area:12/3/span 2/span 3">component&shy;Did&shy;Update</div>
        <div class="methods" style="grid-area:12/6/span 2/span 1">component&shy;Will&shy;Unmount</div>
 
        <div class="methods constructor" style="grid-area:3/2/span 2/span 1">constructor</div>
        <div class="methods render" style="grid-area:6/2/span 2/span 4">render</div>
        <div class="methods updates" style="grid-area:9/2/span 2/span 4">React updates DOM and refs</div>
 
        <div class="uitem u1" style="grid-area:3/3/span 2/span 1">New Props</div>
        <div class="uitem u2" style="grid-area:3/4/span 2/span 1">setSate()</div>
        <div class="uitem u3" style="grid-area:3/5/span 2/span 1">forceUpdate()</div>
</div>
</div>