如何实现列表项三列居中与内容对齐，适配动态场景？

Hey Antonio, let's sort out this layout problem you're having! Your original inline-block approach was causing alignment issues because of whitespace gaps and inconsistent column sizing, especially with dynamic content. CSS Grid is the perfect tool here—it handles automatic wrapping, consistent alignment, and dynamic item counts seamlessly.

Here's the Revised Code: #

CSS

body { margin: 0; padding: 0; }

.wk_search-resume { 
  background-color: white; 
  border: 1px solid #bfbfbf; 
  margin: 32px 16px; 
  padding: 24px 24px 8px 24px; 
  position: relative; 
}

.wk_search-resume-list { 
  width: 100%; 
  display: grid;
  /* Auto-adjust columns: min 250px each, fill available space */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  /* Spacing between items (replaces messy margins) */
  gap: 16px;
  /* Center the grid when there aren't enough items to fill 3 columns */
  justify-content: center;
  padding: 0;
  margin: 32px 0 0 0;
  border: 1px solid red;
  list-style: none; /* Remove default bullet points */
}

.wk_search-resume-list li { 
  margin-bottom: 16px; 
  font-size: 14px; 
  /* Center content vertically and horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wk_search-resume-list strong { 
  display: block;
  width: 100%; /* Force consistent width for aligned text */
  margin-top: 4px;
}

HTML (No Changes Needed!)

<ul class="wk_search-resume-list wk-interval">
<li class="wk_search-resume-list--procedure">Tipo de procedimiento <strong>Procedimiento ordinario</strong></li>
<li class="wk_search-resume-list--subvoice">Subvoz <strong>Extinción y suspensión del arrendamiento</strong></li>
<li class="wk_search-resume-list--favor">A favor <strong>Arrendador</strong></li>
<li class="wk_search-resume-list--year">Año <strong>1992</strong></li>
<li class="wk_search-resume-list--resource">Tipo de recurso <strong>Procedimiento</strong></li>
<li class="wk_search-resume-list--against">En contra <strong>Arrendatario</strong></li>
<li class="wk_search-resume-list--judgment">Sentido del fallo <strong>Arrendador</strong></li>
<li class="wk_search-resume-list--judgment">Argumentos legales <strong>Crédito bancario</strong></li>
</ul>

Why This Works for Your Requirements: #

• 3-Column Centered Layout: The grid-template-columns rule creates equal-width columns that automatically wrap when space is limited. justify-content: center ensures the grid stays centered if there aren't enough items to fill all three columns.
• Aligned Content: Each list item uses flexbox to center content vertically, and text-align: center handles horizontal alignment. Setting strong to width:100% ensures the bold text lines up neatly even with varying lengths.
• Dynamic Content Handling:
  • Single Item: When only one list item exists, it will take up the full available width (or at least 250px) and stay centered.
  • Automatic补位 (Auto-Fill): If you delete any item, the remaining items will instantly reflow to fill empty spots in the grid—no gaps or misalignment.
• No Whitespace Issues: Unlike inline-block, Grid eliminates unwanted spacing between items using gap, so you don't have to hack font-size:0 or negative margins.

Quick Adjustments: #

• If you want fixed 3 columns regardless of screen size (instead of responsive wrapping), replace repeat(auto-fit, minmax(250px, 1fr)) with repeat(3, 1fr). This will always show 3 columns, with items wrapping to the next row when needed.
• Tweak the minmax(250px, 1fr) value to adjust the minimum column width based on your design needs.

内容的提问来源于stack exchange，提问作者Antonio