怎样才能让模式在桌面上变得更大？

Question

我正在尝试在我正在工作的网站上获得模式，以便在桌面上打开较大的视图，并在移动设备中更改为垂直视图，就像我在Figma中设计的这些示例：

​

​

​

。

任何我可以在代码中修改以反映这些图像的帮助都将是令人惊叹的。

{showModal ? (
            <>
            
          <div
            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
            onClick={() => setShowModal(false)}
          >
            
            <div className="relative w-auto my-6 mx-auto max-w-3xl grid grid-cols-2 "> 
            {/* which grid? number one */}
            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
            <Image
        src={ImageLink}
        alt="Work?"
        width="600"
        height="600"
        layout="responsive"
        onClick={() => setShowModal(true)}

      />  

</div>
              {/*content*/}
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                {/*header*/}
                <div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
                  <h3 className="text-3xl font-semibold">
{Name}                  </h3>
                  <button
                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
                    onClick={() => setShowModal(false)}
                  >
                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                      ×
                    </span>
                  </button>
                </div>
                {/*body*/}
                <div className="relative p-6 flex-auto">
                  <p className="my-4 text-gray-600 text-lg leading-relaxed">
                   {Description}
                  </p>
                </div>
                {/*footer*/}
                <div className="flex items-center justify-end p-6 border-t border-solid border-gray-300 rounded-b">
                  <button
                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    // onClick={() => setShowModal(false)}
                  >
                    Contact
                  </button>
                  <button
                    className="bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    // onClick={() => setShowModal(false)}
                  >
Make an Offer                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
      ) : null}
    </>
  );
}

我只是停留在顺风文档-尝试使用网格系统，它只是不想工作，并希望了解我哪里出了问题。

这里有一个指向当前站点的链接，可以查看它当前的https://greenr-two.vercel.app/example外观

提前谢谢你，

Answer 1

这是一个简单的改变。

在移动设备上，带有col-span-1的grid-cols-1将100%用于图像和div。

在桌面上，使用图像作为col-span-2的md:grid-cols-3将占用66% (2/3 * 100)。而带有col-span-1的div将占用33% (1/3 * 100)。

<div class="grid grid-cols-1 md:grid-cols-3">
    <image class="col-span-1 md:col-span-2" />
    <div class="col-span-1"></div>
</div>