[CSS] Grid 그리드

/* 부모 컨테이너 band */
.band {
	width: 90%;
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
}

• max-width: 최대 너비
• width: 너비
• display: 그리드 사용 gird
• grid-template-columns: 화면 가로 길이
• gird-template-rows: 화면 세로 길이, auto : 아이템 개수만큼 늘어나도록
• grid-gap: 아이템 간 간격

 

/* 휴대폰 화면 */
@media screen and (max-width: 500px){
	.band {
    	grid-template-columns: 1fr 1fr;
    }
}

/* 패드 화면 */
@media screen and (min-width: 850px){ 
	.band {
    	grid-template-columns: repeat(4, 1fr)
        /* repeat(4, 1fr) == 1fr 1fr 1fr 1fr */
    }
}

 

https://www.youtube.com/watch?v=sgyibPa-2i8&ab_channel=Rock%27sEasyweb