如何利用尾风CSS实现两列设计响应

Question

我目前正在为我的求职信设计一个响应性的布局，我偶然发现了一个关于响应性的问题。桌面布局看起来像这。但是，我选择了将文本和进度条隐藏在移动视图中，但是芯片上的空白并不像您看到的这里那样一致。

我在计算机技能部分使用这段代码，因为我认为我可以将解决方案应用到下面的部分。但是，如果需要的话，我会为上下文发布更多的代码。

    <div className="grid grid-rows-4 grid-cols-1 sm:grid-cols-3 items-center justify-center w-full">
      <p className="text-center hidden md:block">Computer Skills</p>
      <div className="flex flex-row gap-2 justify-center col-span-2 items-center">
        <CustomButton text="STUB1" />
        <ProgressBar width="w-full" />
      </div>
      <div className="col-span-1  m-2 sm:m-6" />
      <div className="flex gap-2 justify-center col-span-2 items-center">
        <CustomButton text="STUB2" />
        <ProgressBar width="w-3/4" />
      </div>
      <div className="col-span-1 m-2 sm:m-6" />
      <div className="flex gap-2 justify-center col-span-2 items-center mt-3 sm:mt-0">
        <CustomButton text="STUB3" />
        <ProgressBar width="w-3/4" />
      </div>
      <CustomLine ine isDashed="yes" />
    </div>

非常感谢您的提前帮助。

Answer 1

尝试这个如果会，任何响应问题，然后使响应您的组件，这将是任何问题.！

<div className="grid grid-cols-1 grid sm:grid-cols-12 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-4 items-center justify-center w-full">
  <p className="text-center hidden md:block">Computer Skills</p>
  <div className="flex flex-row gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB1" />
    <ProgressBar width="w-full" />
  </div>
  <div className="col-span-1  m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center">
    <CustomButton text="STUB2" />
    <ProgressBar width="w-3/4" />
  </div>
  <div className="col-span-1 m-2 sm:m-6" />
  <div className="flex gap-2 justify-center col-span-2 items-center mt-3 sm:mt-0">
    <CustomButton text="STUB3" />
    <ProgressBar width="w-3/4" />
  </div>
  <CustomLine ine isDashed="yes" />
</div>