与 Tailwind 和 React 保持一致

Question

我正在尝试让两个不同的可视化正确地并排放置。

这是当前样式...

          <div className="flex flex-col md:flex-row" >
            <div className="w-full md:w-2/3">
              <div className="text-center mt-4 flex justify-center items-center">
                <h1 className="text-blue-500 text-lg font-semibold mr-5">
                  {format(new Date(selectedDate), 'do, MMMM - yyyy')}{' '}
                </h1>
                {isLoading && <Loader />}
              </div>
              <div>
                <div className = "grid-cols-2 grid-flow-col" >
                  <div className = "grid-cols-1">
                    <h3 className="capitalize">Moodmap Daily Index</h3>
    
                      <Overview data={lineGraphData} timing={settingsData} />
                  </div>
                  <div>
                    <Expressions data={expressionsData} />
                  </div>
                </div>
              </div>
              <div style={{ height: 100, width: 1000 }}>
                <SubstanceDetails
                  fetchSubstances={fetchSubstances}
                  loading={loading}
                  data={data}
                />
              </div>
            </div>
          </div>

由于某些原因渲染时，虽然我做了很多更改，但结果是这样的，

我希望他们水平坐着，底部图表在右手边，理想情况下折线图要大得多，比如占 2/3。不确定为什么这个错误不断发生。

Answer 1

您需要通过在指定网格列的元素中包含 grid 类名来创建网格容器：

<div className = "grid-cols-2 grid-flow-col" >

应该变成：

<div className = "grid grid-cols-2 grid-flow-col" >

https://tailwindcss.com/docs/display#grid

注意，要调试它，您可以使用检查器查看输出中没有网格容器。

与 Tailwind 和 React 保持一致

Alignment with Tailwind and React

reactjs

css-grid

tailwind-css