Grid 아이템들의 상-하-좌-우-사이 간격 유지하기 : padding, margin

---

< 참고 자료 >

 

stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items?page=1&tab=votes#tab-top

---

<div id="parent">

    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>

</div>

#parent {

    position        : absolute;
    width           : 500px;
    height          : 500px;
    background-color: tomato;

    display         : grid;
    grid-auto-flow  : column;

    padding         : 10px;         /* 나와 자식간에 10px 의 gap 을 만들어줘! */
    box-sizing      : border-box;   /* 하지만..날 늘리지말고, 자식을 10px 줄여줘! */

}

#child {

    background-color: green;
    margin          : 10px;         /* 부모의 padding 값과 같아야함! */

}