如何纯CSS实现基于页面宽度的动态单/双列网格（含自定义排序）

Perfect scenario for CSS Grid! We can achieve exactly what you need without any extra column wrappers, handle dynamic heights, and switch between the two layout/sorting rules purely with CSS. Here's the breakdown:

How It Works #

Two-Column Layout (Desktop/Larger Screens) #

We’ll use CSS Grid to lock all .left elements to the first column and .right elements to the second column. Grid automatically handles dynamic heights, creating that "waterfall" effect where .left.two might sit above .right.two if .right.one is taller—no extra code needed for this behavior.

Single-Column Layout (Mobile/Smaller Screens) #

We’ll switch to a single column and use the CSS order property to reorder elements to match your desired sequence. Since your element count is dynamic, we’ll leverage custom CSS variables to set order values at render time (which aligns with your ability to assign classes/properties dynamically when elements are rendered).

Full Code Implementation #

HTML #

Keep your existing structure—no extra column wrappers required:

<div class="grid">
  <!-- Assign custom --order variables at render time for dynamic sorting -->
  <div class="left one" style="--order: 1">left one</div>
  <div class="right one" style="--order: 3">right one</div>
  <div class="left two" style="--order: 2">left two</div>
  <div class="right two" style="--order: 4">right two</div>
  <div class="left three" style="--order: 5">left three</div>
</div>

CSS #

/* Base styles for all elements */
.left, .right {
  padding: 10px;
  margin: 10px;
  color: white;
  background-color: grey;
  border-radius: 2px;
}

.grid {
  display: grid;
  background-color: lightgrey;
}

/* Two-column layout (screen width > 400px) */
@media screen and (min-width: 401px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Pin left elements to column 1, right elements to column 2 */
  .left {
    grid-column: 1;
  }
  .right {
    grid-column: 2;
  }
  /* Reset order to use natural DOM sequence for two-column layout */
  .grid > * {
    order: initial;
  }
}

/* Single-column layout (screen width ≤ 400px) */
@media screen and (max-width: 400px) {
  .grid {
    grid-template-columns: 1fr;
  }
  /* Use the custom --order variable to enforce your desired sequence */
  .grid > * {
    order: var(--order);
  }
}

Key Notes #

• Dynamic Heights: The two-column layout relies on Grid’s automatic row sizing, so elements stack naturally in their columns regardless of height—creating the exact waterfall effect you described where .left.two can sit above .right.two.
• Dynamic Element Count: By assigning the --order variable during rendering, you can handle any number of elements. Just calculate the order values based on your desired single-column sequence when generating each element’s HTML.
• No Extra Wrappers: We only use the .left and .right classes on individual elements, no conditional wrapping divs for columns required.

内容的提问来源于stack exchange，提问作者roberto tomás