顺风宽度不适用于断点

Question

我完全是顺风的初学者，我决定用它来重建我的一个项目。我有一个带有2列的网格，它应该水平地对齐彼此，而不是在屏幕到达断点时垂直排列。

我的问题是，当我设置宽度以适应屏幕，据我所知，这应该使每一列填充屏幕。然后，第一列应该向下推倒2。但它不知道，我也不知道怎么解决它。

<div class="grid grid-cols-2 h-screen">
    <div className="justify-center items-center flex flex-col lg:w-screen">
        <h1 id="elsoszoveg-cim" className="text-5xl tracking-wide font-medium text-center pb-9">...Mi Pixie?</h1>
        <p className="text-center text-2xl md:w-screen">
            Pixie egy személyes projekt, amelyet azért fejlesztettem, 
            hogy a különböző elfoglaltságaimat egyesíteni tudjam.
        </p>
    </div>
    <div className=" bg-sky-100">
    </div>
</div>

因此，基本上，我希望我的2列在断点之后彼此位于下面。

Answer 1

不要将断点应用于元素的width，而是更改网格中的columns数量。例如，在较小的屏幕上有两列，在较宽的屏幕上有一列grid-cols-2 md:grid-cols-1。

<div class="grid h-screen grid-cols-2 md:grid-cols-1">
  <div class="flex flex-col items-center justify-center">
    <h1 id="elsoszoveg-cim" class="pb-9 text-center text-5xl font-medium tracking-wide">...Mi Pixie?</h1>
    <p class="text-center text-2xl">Pixie egy személyes projekt, amelyet azért fejlesztettem, hogy a különböző elfoglaltságaimat egyesíteni tudjam.</p>
  </div>
  <div class="bg-sky-100"></div>
</div>

顺风游戏