カテゴリ表示のみを2列レイアウトに再構築

How to style the /categories page? の議論に続きます:

以前の議論に関連する質問があります。

これを達成するのはどれほど簡単でしょうか:

私が最も近づけたのはこれです:

テーブルを囲む DIV に column-count: 2 を適用し、テーブル要素に display: block を適用することで実現しました。

しかし、ヘッダーを行全体にわたって表示させる方法が確信が持てません:sweat_smile

編集。
機能的には、このヘッダー行を複製するか、「Categories」のみを残すか、あるいは単にすべてを非表示にする必要があることに気づきました。

「いいね!」 3

おそらく、tbodydisplay: blockcolumn-count: 2 を設定する方が簡単だと思います。そうすれば、thead は引き続き全幅にまたがります。

ただ、その時点で「Category」以外を非表示にするのが良いでしょう。

「いいね!」 3

Flexbox を使った代替案:

.category-list tbody {
    display: flex;
    flex-wrap: wrap;
}
.category-list tbody tr {
    width: 50%;
    display: flex;
}
.category-list tbody .category {
    flex: 1;
}

まだいくつか調整が必要です。

「いいね!」 9

その最中に、水平方向の整列を保てると良いのにと思い出しました。
これは素晴らしいですね :slight_smile:

この CSS を使用すると、カテゴリは次のように一覧表示されません:

1 - 4
2 - 5
3 - 6

代わりに、以下のように表示されます:

1 - 2
3 - 4
5 - 6

また、小さな画面でスタイルを変更するためのメディアクエリを追加する必要があります。

「いいね!」 4

両方のオプションを少し試してみましたが、カテゴリ表を連続的に分割するのではなく、半分に分割する方が私たちの目的には適しているようです。

ただし、どこで分割するかを制御するのは難しいです。

私のブラウザではこれを達成できました:

ただし、カテゴリを左側に人工的に div 内に配置した場合に限ります(分割が早すぎるのを防ぐため。そうしないと「Measure」ルートカテゴリが右列に行ってしまいます):

特定のカテゴリ ID を持つ行を div 内に「詰め込む」方法はありませんか?テーマ API を通じて可能でしょうか?

「いいね!」 1

ご質問の内容は少し複雑で、JavaScript の工夫が必要かもしれません。
CSS の column プロパティを使用する場合、高さを固定しない限り、Flexbox のような横方向への整列は期待できず、見た目があまり良くならないと思います。

ご要望の機能は実現できましたが、少しハック的な方法です。

以前に使用した CSS をベースにし、空の <tr> 要素を追加しました(これは JavaScript で 1 行で実装可能だと考えています)。その後、order プロパティを設定して div の順序を変更しました。後者は CSS のみで、各 data-category-id の HTML 値をターゲットにすることで実現可能です。結果は以下の通りです:

追加した空の <tr> 要素は以下です:

ただし、カテゴリを追加または削除するたびに、CSS や JavaScript を変更する必要がある点にご注意ください。

追記:1 つまたは 2 つの空の要素のみを追加する必要がある場合、JavaScript で <tr> を追加する必要はありません。以下のように :after:before を使用することも可能です:

.category-list tbody:after {
    width: 1px;
    content: "";
}

これにより、同じように機能する 1px の空の要素が追加されます。

「いいね!」 3

ありがとうございます、かなりうまくいきました :slight_smile: カテゴリを細かく管理する必要がありますが、問題ありません。最終結果は当社のフォーラムでご覧ください。

「いいね!」 1

フォーラムのURLを教えていただけますか?

「いいね!」 1

もちろん、プロフィールに記載していますし、直接宣伝したくなかったので :smiley:

「いいね!」 2