CSS实现单<ul>目录页：每25个<li>自动分4列布局需求

To create an A-Z directory using a single <ul> where items automatically arrange into 4 columns (25 items per column) and wrap into new 4-column groups as you add more entries, we can use CSS Grid combined with nth-child selectors to position each item precisely. No manual list splitting required—new <li> elements will adapt the layout automatically.

Step 1: Basic HTML Structure #

Keep it simple: a single <ul> containing all your A-Z items:

<ul class="az-directory">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <!-- Add all your items here; new entries will fit seamlessly -->
</ul>

Step 2: CSS Implementation #

This code ensures exactly 25 items per column, grouped into 4-column rows. New items will automatically start a fresh 4-column block below the previous one.

/* Base container styles */
.az-directory {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal-width columns per group */
  gap: 1.5rem; /* Adjust spacing between items/columns as needed */
}

/* Position items in the correct row within their 25-item column block */
.az-directory li:nth-child(25n + 1) { grid-row: 1; }
.az-directory li:nth-child(25n + 2) { grid-row: 2; }
.az-directory li:nth-child(25n + 3) { grid-row: 3; }
.az-directory li:nth-child(25n + 4) { grid-row: 4; }
.az-directory li:nth-child(25n + 5) { grid-row: 5; }
.az-directory li:nth-child(25n + 6) { grid-row: 6; }
.az-directory li:nth-child(25n + 7) { grid-row: 7; }
.az-directory li:nth-child(25n + 8) { grid-row: 8; }
.az-directory li:nth-child(25n + 9) { grid-row: 9; }
.az-directory li:nth-child(25n + 10) { grid-row: 10; }
.az-directory li:nth-child(25n + 11) { grid-row: 11; }
.az-directory li:nth-child(25n + 12) { grid-row: 12; }
.az-directory li:nth-child(25n + 13) { grid-row: 13; }
.az-directory li:nth-child(25n + 14) { grid-row: 14; }
.az-directory li:nth-child(25n + 15) { grid-row: 15; }
.az-directory li:nth-child(25n + 16) { grid-row: 16; }
.az-directory li:nth-child(25n + 17) { grid-row: 17; }
.az-directory li:nth-child(25n + 18) { grid-row: 18; }
.az-directory li:nth-child(25n + 19) { grid-row: 19; }
.az-directory li:nth-child(25n + 20) { grid-row: 20; }
.az-directory li:nth-child(25n + 21) { grid-row: 21; }
.az-directory li:nth-child(25n + 22) { grid-row: 22; }
.az-directory li:nth-child(25n + 23) { grid-row: 23; }
.az-directory li:nth-child(25n + 24) { grid-row: 24; }
.az-directory li:nth-child(25n + 25) { grid-row: 25; }

/* Shift items into the correct column for each 100-item group (4×25) */
.az-directory li:nth-child(100n + 101):nth-child(-n + 100n + 125) { grid-column: 1; }
.az-directory li:nth-child(100n + 126):nth-child(-n + 100n + 150) { grid-column: 2; }
.az-directory li:nth-child(100n + 151):nth-child(-n + 100n + 175) { grid-column: 3; }
.az-directory li:nth-child(100n + 176):nth-child(-n + 100n + 200) { grid-column: 4; }

Step 3: Simplify with a Preprocessor (Optional) #

The repetitive nth-child rules can be generated automatically with Sass/Less to save time. Here’s a Sass example:

.az-directory {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;

  // Generate row positions for 25-item blocks
  @for $i from 1 through 25 {
    li:nth-child(25n + #{$i}) {
      grid-row: #{$i};
    }
  }

  // Generate column positions for subsequent 100-item groups
  @for $group from 1 through 10 { // Adjust max groups as needed
    $start: 100 * $group + 1;
    $col1-end: $start + 24;
    $col2-end: $col1-end + 25;
    $col3-end: $col2-end + 25;
    $col4-end: $col3-end + 25;

    li:nth-child(n + #{$start}):nth-child(-n + #{$col1-end}) { grid-column: 1; }
    li:nth-child(n + #{$col1-end + 1}):nth-child(-n + #{$col2-end}) { grid-column: 2; }
    li:nth-child(n + #{$col2-end + 1}):nth-child(-n + #{$col3-end}) { grid-column: 3; }
    li:nth-child(n + #{$col3-end + 1}):nth-child(-n + #{$col4-end}) { grid-column: 4; }
  }
}

How It Works #

• The grid is configured to have 4 equal-width columns.
• Each item is placed in a specific row using nth-child(25n + X) to guarantee exactly 25 items per column.
• After every 100 items (4 columns × 25 items), new entries are shifted into a fresh set of 4 columns below the previous group.
• Variable-height <li> elements are supported—grid rows automatically adjust to fit the tallest content in each row.

内容的提问来源于stack exchange，提问作者Valentijn van den Hout