It's my first time doing gridlayout in css, but I don't know how to interpret grid-column and grid-row.

 <div class="grid">
                <div>
                    <img src="./images/gallery_1.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_2.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_3.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_4.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_5.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_6.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_7.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_8.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
                <div>
                    <img src="./images/gallery_9.jpg" alt="image" title="image">
                    <div class = "shadow"><a href = "#">MORE</a></div>
                </div>
            </div>

.grid { width:1440px; height:1000px; margin:0 auto; display:grid; grid-template-columns: 20% 25% 25% 30%; grid-template-rows: 30% 20% 25% 25%; margin-top:10px;}
    .grid > div { width:100%; height:100%; padding:5px; position:relative; }
    .shadow { position:absolute; width:calc(100% - 10px); height:calc(100% - 10px); top:5px; left:5px; background:rgba(0,0,0,0.6); opacity:0; z-index:10;  }
        .shadow a { position:absolute; padding:10px 25px; color:#f2f4f8; border:1px solid #f2f4f8; font-size:1.2em;  left:50%; top:50%; transform:translate(-50%, -50%); z-index:20; }
    .shadow a:hover { color:#111; background:#f2f4f8; }
    .grid > div:hover .shadow { opacity:1;  }

    .grid > div:nth-child(4) { grid-column:4; grid-row:1/3; }
    .grid > div:nth-child(6) { grid-column:2/4; grid-row:2; }
    .grid > div:nth-child(7) { grid-column:1/3; grid-row:3/5; }
    .grid > div:nth-child(8) { grid-column:3/5; grid-row:3; }
    .grid > div:nth-child(9) { grid-column:3/5; grid-row:4; }