*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
main{
    padding: 3rem;
}
.gride{
    display: grid;
    /* grid-template-columns: repeat(2,1fr); */

    /* วิธีการ Reponsive แบบใหม่  start*/
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* 
    auto-fit คือ ปรับขนาดให้ฟิตตามคอนเทนเนอร์ที่อยู่
    minnax คือ การกำหนดขนาดที่ต่ำที่สุด และมากที่สุด
    */
     /* วิธีการ Reponsive แบบใหม่ start*/

    grid-gap: 2rem;
}


/* วิธี @media Reponsive แบบเดิม start */
/* @media screen and (max-width:360px)  {
    .gride{
        grid-template-columns: repeat(2,1fr);
    }
} */
/* วิธี @media Reponsive แบบเดิม end */

.gride-items img{
width: 100%;
}