顺风CSS响应网格问题

Question

我在尝试向 grid-column 添加“screen”前缀时遇到问题，布局很完美，但是当我将 md: 添加到 grid-col-span-6 时，一切都搞砸了。

这是代码：

import React from "react";
import app from "../images/app.png";

    const Featured = () => {
    return (
    <div className="mt-52 ">
      <h1 className="text-primary-dark-theme text-5xl mt-14">Projects</h1>

      <div className="grid grid-cols-12 grid-rows-1 mt-20 ">
        <div className="row-start-1 row-span-1 col-start-1 md:col-span-6">
          <img src={app} alt="" className="w-full" />
        </div>

        <div className="row-start-1 row-span-1 col-start-6  col-span-7">
          <div className="h-full w-full">
            <h1 className="text-right text-primary-dark-theme">
              Featured Project
            </h1>
            <h1 className="text-right text-gray-300 font-bold ">Title</h1>

            <p className="p-5 bg-gray-800 text-gray-400 shadow-lg rounded-md mt-5">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio id
              doloribus sequi repellendus aperiam dolore!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Featured;

这是 md 中 ui 的外观

这是我想要的结果

当我将 md predix 添加到 col-span-6 时发生的事情

Answer 1

问题似乎是在应用响应式md:col-span-6 时，它也会覆盖col-start-1（您可以看到开发工具中不再应用的样式）。添加md:col-start-1 似乎可以解决此问题。

但是，只需将图像的包装器 <div /> 更改为：

<div class="row-start-1 row-span-1 col-start-1 col-span-12">

似乎达到了预期的效果。