sohyeon kim

💡 그리드 속성 몇 개 더 알아보자. 기본 세팅! .container { display: grid; height: 500px; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } ✳️ align-items : 플렉스박스 방식에서와 유사한 역할을 한다. 그리드 컨테이너 행 트랙의 높이, 수직축(열)을 기준으로 그리드 아이템의 배치를 결정한다. ✳️ align-self : 각각의 그리드 아이템이 어떤 식으로 배치될 것인지를 스스로 결정 속성값 의미 stretch 기본값! 그리드 아이템들이 트랙 높이만큼 확장된다. start 트랙 상단으로부터 하단을 향해 배치 end 트랙 하단으로부터 상단을 향해 배치 center 할당된..

💡 그리드 컨테이너 내 그리드 아이템에 주어지는 속성에 대해 알아보자. ✳️ grid-column & row : 그리드 컨테이너의 줄 번호를 이용해 아이템을 배치한다. 기본 세팅! 6개의 리스트를 2열 3행으로 ~ 1 2 3 4 5 6 * { box-sizing: border-box; } body { margin: 0; } ul { padding: 0; list-style: none; border: 5px solid aquamarine; } li { display: flex; justify-content: center; align-items: center; background-color: lemonchiffon; border: 5px solid pink; border-radius: 10px; } .con..