如何让React中的多个div元素实现垂直堆叠显示？

当前代码中两个早餐卡片div因父级Grid的多列布局横向排列，以下是几种实现垂直堆叠的具体方案：

方案1：改为单列Grid布局（最简洁） #

直接修改父级Grid为单列结构，所有子元素会自动垂直排列，同时可移除子元素的列定位样式：

import React from "react";

export default function Example() {
  return (
    <div>
      <div className="grid grid-cols-1">
        <div className="mt-px inline-grid grid-cols-1 sm:col-start-3">
          <a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
            <p className="order-1 font-semibold text-blue-700">Breakfast</p>
            <p className="text-blue-500 group-hover:text-blue-700">
              <time dateTime="2022-01-12T06:00">6:00 AM</time>
            </p>
          </a>
        </div>
        <div className="mt-px inline-grid grid-cols-1 sm:col-start-3">
          <a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
            <p className="order-1 font-semibold text-blue-700">Breakfast</p>
            <p className="text-blue-500 group-hover:text-blue-700">
              <time dateTime="2022-01-12T06:00">6:30 AM</time>
            </p>
          </a>
        </div>
      </div>
    </div>
  );
}

方案2：让子元素占据整行（保留父级多列结构） #

若需保留父级原有多列布局，仅让这两个div垂直堆叠，可给每个子div设置grid-column: 1 / -1，使其占据所有列并自动换行：

import React from "react";

export default function Example() {
  return (
    <div>
      <div
        className="grid"
        style={{
          gridTemplateColumns: "1.75rem repeat(288, minmax(0, 1fr)) auto",
        }}
      >
        <div
          className="mt-px inline-grid grid-cols-1 sm:col-start-3"
          style={{ gridColumn: "1 / -1" }}
        >
          <a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
            <p className="order-1 font-semibold text-blue-700">Breakfast</p>
            <p className="text-blue-500 group-hover:text-blue-700">
              <time dateTime="2022-01-12T06:00">6:00 AM</time>
            </p>
          </a>
        </div>
        <div
          className="mt-px inline-grid grid-cols-1 sm:col-start-3"
          style={{ gridColumn: "1 / -1" }}
        >
          <a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
            <p className="order-1 font-semibold text-blue-700">Breakfast</p>
            <p className="text-blue-500 group-hover:text-blue-700">
              <time dateTime="2022-01-12T06:00">6:30 AM</time>
            </p>
          </a>
        </div>
      </div>
    </div>
  );
}

方案3：替换为Flex布局 #

将父级布局改为flex flex-col，利用Flex的垂直排列特性实现堆叠：

import React from "react";

export default function Example() {
  return (
    <div>
      <div className="flex flex-col">
        <div className="mt-px inline-grid grid-cols-1 sm:col-start-3">
          <a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
            <p className="order-1 font-semibold text-blue-700">Breakfast</p>
            <p className="text-blue-500 group-hover:text-blue-700">
              <time dateTime="2022-01-12T06:00">6:00 AM</time>
            </p>
          </a>
        </div>
        <div className="mt-px inline-grid grid-cols-1 sm:col-start-3">
          <a href="#" className="rounded-lg bg-blue-50 p-2 text-xs">
            <p className="order-1 font-semibold text-blue-700">Breakfast</p>
            <p className="text-blue-500 group-hover:text-blue-700">
              <time dateTime="2022-01-12T06:00">6:30 AM</time>
            </p>
          </a>
        </div>
      </div>
    </div>
  );
}

方案选择建议 #

• 方案1：适合完全不需要父级多列布局的场景，代码最简洁。
• 方案2：适合需要保留父级多列结构，仅调整特定子元素排列的场景。
• 方案3：适合习惯用Flex布局实现垂直排列的场景，逻辑更直观。

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