[CSS] 댓글, 대댓글로 display: grid;를 더 알아보자

 

댓글과 대댓글을 배치하는 문제로 하루종일 고민했다

결론은 댓글과 관련된 대댓글을 한번에 들고있을 content box를 만들고,

댓글 관련 내용 밑에 대댓글 박스를 만들고, 대댓글을 쭉 생성하도록 하는 것

 

 

 

content wrapper를 만들고 그 안에  아래와 같이 div를 생성했다.

 

sub-content-wrapper
 ㄴ comment-card
     - comment 관련 내용들
 ㄴ cocomment-box
    ㄴ cocomment-card
        - cocomment 관련 내용들

 

 

 

 

 

---

 

 

 

댓글, 대댓글 창을 만들면서

한 페이지에 띄워줄 댓글과 대댓글의 양을 정해두고 페이지네이션을 적용하거나 (like 네이버카페)

혹은 제한없이 쭉 띄워줄 수 있겠다는 생각이 들었다.

 

 

 

 

댓글을 띄우는 양을 정하고싶다면,

row를 grid-template-rows로 띄우기를 원하는 행만큼 나누고 auto-fill로 flex 속성을 부여하여

요소가 생성되었을 경우 자동으로 해당 그리드에 요소를 추가하도록 만들면 된다

 

 

추가되는 요소는 default값이 가로로 되어있어 가로 열부터 쭉 채운 후 세로로 넘어간다.

이 부분을 조정하는 방법도 있다고 하나 이 글에선 다루지 않는다

 

1	2	3
4	5	6
7	8	...

 

 

 

---

 

띄우는 카드 양을 정하기

 

repeat 함수의 첫 인자로 필요한 횟수만큼 repeat할 수 있도록 넣어준다

minmax는 최소 크기, 최대 크기를 정해주는 옵션

 

혹은 

 

필요한 row 개수만큼 auto를 노가다로 붙인다^^;

 

.sub-content-wrapper {
    display: grid;
    grid-template-rows: repeat(5, minmax(100px, auto));
}

or

.sub-content-wrapper {
    display: grid;
    grid-template-rows: auto auto auto auto ...;
}

 

 

 

 

---

 

 

댓글 띄우는 양을 정하지 않고 생성되는 만큼 자동으로 늘어나게 하기

repeat과 auto를 사용해 상위 div에 자동으로 칸이 늘어나는 속성을 준다.

 

 

 

columns에 준 1fr 은 비율로 화면을 분할해 가지도록 함

 

row에 repeat의 첫 인자에 auto를 주어 행을 제한하지 않고 늘어나도록 하며,

높이는 100% 로 내부 요소에 따라 높이가 달라질 수 있도록 하였다.

 

 

grid-auto-rows 를 사용해 자동으로 늘어나게 만들 수도 있다!

 

.sub-content-wrapper {
    display: grid;
    grid-gap:15px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(auto, 100%)
}

or

.sub-content-wrapper {
    display: grid;
    grid-gap:15px;
    grid-template-columns: 1fr;
    grid-auto-rows: auto
}