예제 grid-template-gap box-shadow

 

<style>
#gridtemplateid1 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 10px;
}

.gridclass1 {
box-shadow: 3px 3px 5px rgb(0, 0, 0);
}
</style>


<div id="gridtemplateid1">
    <div class="gridclass1">
        <h1> Title1 </h1>
        <a href="#desc1">
        <img src="https://lh3.googleusercontent.com/IBdpjbN3u01YH3o0CKV558zM_MZan-CNfiJP4Cjrvzqcxp_1t0SOKHLutR4h0nYL3DD9A_z1tfsB2B7JxKony1O307xF2MiZqazpfNnxosIEkjfWl8Y" width="200px">
    </a>
        <p> description... </p>
    </div>
    <script>
        gt = document.querySelector("#gridtemplateid1");
        go = document.querySelector(".gridclass1");
        for (i = 0; i < 21; i++) {
            gt.appendChild(go.cloneNode(deep = true));
        }
    </script>
</div>