#21 그리드 강의 정렬 관련 속성

.container {

justify-items(가로 방향 정렬) : center;

align-items(세로 방향 정렬) : center;

}

를 설정하는데 각각 색깔이 차있는 div박스가 왜 찌부되는건가요.....???? 가로세로 길이가 지정되있지 않아서 인가요?

외부 컨테이너에서 정렬을 한다는게 내부 요소를 정렬하는건가요? 자식요소를 정렬하는건가요?(둘이 같은 의미인가요??)

다른 프로젝트 할 때도, 뭐가 자꾸 원하는대로 가운데로 안가서 justify-items : center를 쓰면된다는 소리를 듣긴 했었는데, 그때는 아예 의미도 모르고(다른 강사가 안짚어줬는지 까먹었는지) 아 저거 써도 왜 가운데로 안가냐ㅠ 했던 기억이 있는데 정확한 정황은 까먹었네요.

그래서 왜 찌부가 되고 있는걸까요? html&css 강의 마지막에 큰 멘붕 왔습니다

안녕하세요, 인프런 AI 인턴입니다.
justify-items와 align-items 속성은 CSS Grid 내부에서 그리드 아이템들의 정렬을 결정하는 속성입니다.

justify-items는 그리드 아이템을 가로 방향으로 정렬합니다.
align-items는 그리드 아이템을 세로 방향으로 정렬합니다.

질문해주신 내용에 따르면, 그리드 아이템인 div 박스가 찌그러져 보이는 이유는 아래와 같을 수 있습니다.

div 박스의 가로세로 길이가 지정되지 않았을 경우, 기본적으로 내용물의 크기에 맞게 조정되므로, 내용물에 따라 크기가 달라지게 됩니다. 만약 내용이 없거나 크기가 작다면, 가운데 정렬 했을 때 박스가 작게 보일 수 있습니다.
외부 컨테이너에서 정렬한다는 것은, 해당 CSS Grid 컨테이너 내부의 자식 요소들(그리드 아이템)를 정렬한다는 의미입니다.
justify-items: center;를 사용했음에도 원하는대로 가운데로 정렬되지 않는 것은, 다른 CSS 속성에 의해 영향을 받을 수 있기 때문입니다. 예를 들어, 다른 CSS 규칙이나 상위 컨테이너의 스타일에 따라 결과가 달라질 수 있습니다.

정확한 원인을 파악하기 위해서는 실제 HTML과 CSS 코드를 확인해 볼 필요가 있습니다. 또한 그리드 컨테이너와 아이템에 설정된 다른 스타일도 영향을 미칠 수 있으므로, 다른 스타일 규칙들도 검토해야 합니다.

메인 컨텐츠가 가운데로 정렬되지 않는 문제에 대해서는, Grid 레이아웃 외에도 여러 방법이 존재합니다. 예를 들어, flexbox 레이아웃을 사용해도 비슷한 동작을 구현할 수 있으며, margin이나 position을 사용한 방법도 있습니다.

만약 이러한 CSS 속성들이나 Grid 및 Flexbox 레이아웃과 관련된 더 자세한 내용을 배우길 원한다면, 웹 개발 카테고리에서 해당 내용을 포괄하는 강의를 찾아 수강하는 것이 좋을 것 같습니다.

인프런 커뮤니티 질문&답변