FE 개발자의 성장 기록👩‍💻

grid-auto-rows와 grid-auto-columns는 컨테이너 속성이다. 기본 구조 one two three four five six seven eight .container{ border: 5px dashed orange; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); /* grid-auto-flow: row; grid-auto-flow: column; grid-auto-rows: 100px; grid-auto-columns: 100px; */ } .item{ border: 2px solid pink; background-color: lemonchiffon; width: 50px;..

justify-content, align-items, align-content는 컨테이너 속성이다. 세 속성의 차이점을 알아보자. 기본 세팅 one two three four .container{ border: 5px dashed orange; width: 300px; height: 200px; display: flex; /* justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-between; */ } .item{ border: 2px solid pink; background-color: lemonchiffon; wi..