How to style the `/categories` page? 토론을 이어갑니다:
이전 토론과 관련된 질문이 있습니다.
아래와 같은 효과를 달성하는 것이 얼마나 간단한 작업인지 궁금합니다:
제가 만든 가장 가까운 결과는 다음과 같습니다:
테이블을 감싸는 DIV에 column-count: 2를 적용하고 테이블 요소에 display: block을 적용했습니다.
하지만 헤더를 전체 줄에 걸쳐 확장하도록 강제하는 방법을 모르겠습니다 
수정.
기능적으로 볼 때, 이 헤더 행을 중복하거나, 'Categories’만 남기거나, 아니면 아예 모두 숨겨야 할 것 같습니다…
tbody에 display: block과 column-count: 2를 적용하면 더 쉬울 것 같아요. 그러면 thead는 여전히 전체 너비를 차지하게 됩니다.
하지만 그 시점에는 "Category"를 제외한 나머지는 숨기는 것이 좋겠죠.
flexbox를 활용한 대안:
.category-list tbody {
display: flex;
flex-wrap: wrap;
}
.category-list tbody tr {
width: 50%;
display: flex;
}
.category-list tbody .category {
flex: 1;
}
아직 몇 가지 세부 조정이 필요합니다.
그 와중에 가로 정렬이 유지되는 것이 좋겠다는 걸 잊고 있었습니다.
정말 훌륭합니다 
이 CSS를 사용하면 카테고리 목록이 다음과 같이 표시되지 않습니다:
1 - 4
2 - 5
3 - 6
대신 다음과 같이 표시됩니다:
1 - 2
3 - 4
5 - 6
또한 작은 화면에서 스타일을 변경하기 위해 미디어 쿼리를 추가해야 합니다.
두 가지 옵션을 조금씩 테스트해 봤는데, 카테고리 테이블을 순차적으로 나열하는 것보다 절반으로 나누는 방식이 우리의 목적에 더 적합해 보입니다.
다만, 어디서 분리할지를 제어하는 것이 까다롭습니다.
브라우저에서는 다음과 같이 구현할 수 있었습니다:
하지만 이는 왼쪽에 있는 카테고리를 div에 인위적으로 배치했을 때만 가능했습니다(너무 일찍 분리되는 것을 방지하기 위한 조치로, 그렇지 않으면 Measure 루트 카테고리가 오른쪽 열로 이동합니다):
특정 카테고리 ID가 포함된 행을 DIV에 '패킹’하는 방법이 있을까요? 테마 API를 통해 가능한지 궁금합니다.
요청하신 내용은 까다로울 수 있으며 일부 JS 마법이 필요할 수도 있습니다.
CSS column 속성을 사용하면, flexbox와 달리(고정 높이를 설정하지 않는 한) 카테고리들이 수평으로 정렬되지 않을 것이라고 확신합니다. 그렇게 하면 모양이 매우 안 좋습니다.
원하시는 것을 구현했지만, 약간 해킹적인 방식입니다:
저는 제 이전 CSS를 사용했고, 빈 <tr>을 추가했으며(이것은 JS 한 줄로 할 수 있다고 생각합니다) order 속성을 설정하여 div의 순서를 변경했습니다. 후자는 각 data-category-id HTML 값을 대상으로 하여 CSS만으로 가능합니다. 결과는 다음과 같습니다:
빈 <tr>의 모습입니다:
카테고리를 추가하거나 제거할 때마다 CSS와/또는 JS를 변경해야 할 가능성이 높다는 점을 유의하세요.
수정: 추가적인 빈 요소가 하나나 두 개만 필요하시다면, <tr>을 추가하기 위해 JS를 사용할 필요가 없습니다. 다음과 같이 :after와/또는 :before를 사용할 수도 있습니다:
.category-list tbody:after {
width: 1px;
content: "";
}
이는 동일하게 작동하는 1px 크기의 빈 요소를 추가합니다.
감사합니다, 꽤 잘 해결되었습니다 카테고리를 직접 세세하게 관리하는 건 괜찮으니 문제없습니다.
최종 결과는 저희 포럼에서 확인하실 수 있습니다.
포럼 URL을 공유해 주시겠어요?
네, 제 프로필에 이미 있고 직접 광고하고 싶지 않았거든요 
