为什么不使用 Tailwind css 显示 2 列网格？

Question

我有一个包含 Minecraft 游戏插件的页面。按照计划，该页面应该在 2 列中，但由于某种原因，所有内容都在 1 列中，并且在右侧第二列有一个空的 space。我已经尝试修复这个错误一个小时了。

我正在使用 React 和 Tailwind。此页面现在的屏幕截图：

如截图所示，右边的space是空的

这是我的组件的代码：

    <ServerContentBlock title={'Plugins'} css={tw`flex flex-wrap`}>
        <div css={tw`w-full`}>
            <FlashMessageRender byKey={'server:plugins'} css={tw`mb-4`} />

            <div css={tw`px-1 py-2`}>
                <Formik
                    onSubmit={submit}
                    initialValues={{ query: '', size: 10 }}
                    validationSchema={object().shape({
                        query: string(),
                        size: number().required(),
                    })}
                >
                    <Form>
                        <div css={tw`flex flex-wrap`}>
                            <div css={tw`w-full sm:w-8/12 sm:pr-4`}>
                                <Field
                                    name={'query'}
                                    placeholder={'PVPUtils'}
                                />
                            </div>
                            <div css={tw`w-full sm:w-4/12`}>
                                <FormikFieldWrapper name={'size'}>
                                    <FormikField as={Select} name={'size'}>
                                        <option value={10}>10</option>
                                        <option value={25}>25</option>
                                        <option value={50}>50</option>
                                    </FormikField>
                                </FormikFieldWrapper>
                            </div>
                        </div>
                    </Form>
                </Formik>
            </div>
        </div>
        {!data ?
            <div css={tw`w-full`}>
                <Spinner size={'large'} centered />
            </div>
            :
            <>
                {data.plugins.length < 1 ?
                    <p css={tw`text-center text-sm text-neutral-400 pt-4 pb-4`}>
                        There are no plugins. Try to search again...
                    </p>
                    :
                    (
                        <>
                            {data.plugins.map((item, key) => (
                                <div tyle="display:grid" css={tw`w-full md:w-6/12 md:pl-2 md:pr-2 pt-4`} key={key}>
                                    <TitledGreyBox title={item.name}>
                                        <div css={tw`px-1 py-2`}>
                                            <div css={tw`flex flex-wrap`}>
                                                <div css={tw`w-auto lg:w-2/12 pr-4`}>
                                                    <img css={'width: 48px; height: 48px;'} src={(item.icon.url === '' ? '//static.spigotmc.org/styles/spigot/xenresource/resource_icon.png' : `//www.spigotmc.org/${item.icon.url}`)} />
                                                </div>
                                                <div css={tw`w-auto lg:w-10/12`}>
                                                    {item.tag}
                                                </div>
                                            </div>

                                            <span>
                                                <FontAwesomeIcon css={`${item.rating.average >= 1 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                                                <FontAwesomeIcon css={`${item.rating.average >= 2 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                                                <FontAwesomeIcon css={`${item.rating.average >= 3 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                                                <FontAwesomeIcon css={`${item.rating.average >= 4 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                                                <FontAwesomeIcon css={`${item.rating.average >= 5 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                                            </span>

                                            {item.file.type !== 'external' &&
                                            <ManageButton pluginId={item.id} installed={item.installed}></ManageButton>
                                            }
                                            <LinkButton target={'_blank'} href={`https://api.spiget.org/v2/resources/${item.id}/go`} css={`float: right; margin-top: .8rem; ${tw`mr-1`}`} type={'button'} color={'primary'} size={'xsmall'}>
                                                <FontAwesomeIcon icon={faExternalLinkAlt}/> View
                                            </LinkButton>
                                        </div>
                                    </TitledGreyBox>
                                </div>
                            ))}
                        </>
                    )
                }
            </>
        }
    </ServerContentBlock>

我也尝试添加 grid grid-cols-2 gap-2，但它没有改变页面，它改变了 TitledGreyBox，也许我添加错误 space?

哪里会出问题？我将不胜感激，因为我不明白哪里出了问题。

Answer 1

您应该将最外面的 div（您使用显示：“网格”属性的地方）包裹到您的地图功能中；不在里面，像这样- .

<div css={tw`grid grid-cols-2 gap-2`}>
     {
       data.plugins.map((item,key)=>(
        <TitledGreyBox title={item.name} key={key}>
        <div css={tw`px-1 py-2`}>
            <div css={tw`flex flex-wrap`}>
                <div css={tw`w-auto lg:w-2/12 pr-4`}>
                    <img css={'width: 48px; height: 48px;'} src={(item.icon.url === '' ? '//static.spigotmc.org/styles/spigot/xenresource/resource_icon.png' : `//www.spigotmc.org/${item.icon.url}`)} />
                </div>
                <div css={tw`w-auto lg:w-10/12`}>
                    {item.tag}
                </div>
            </div>

            <span>
                <FontAwesomeIcon css={`${item.rating.average >= 1 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                <FontAwesomeIcon css={`${item.rating.average >= 2 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                <FontAwesomeIcon css={`${item.rating.average >= 3 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                <FontAwesomeIcon css={`${item.rating.average >= 4 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
                <FontAwesomeIcon css={`${item.rating.average >= 5 ? 'color: yellow;' : ''} ${tw`mt-4`}`} icon={faStar} />
            </span>

            {item.file.type !== 'external' &&
            <ManageButton pluginId={item.id} installed={item.installed}></ManageButton>
            }
            <LinkButton target={'_blank'} href={`https://api.spiget.org/v2/resources/${item.id}/go`} css={`float: right; margin-top: .8rem; ${tw`mr-1`}`} type={'button'} color={'primary'} size={'xsmall'}>
                <FontAwesomeIcon icon={faExternalLinkAlt}/> View
            </LinkButton>
        </div>
    </TitledGreyBox>
       ))
     }
    </div>

为什么不使用 Tailwind css 显示 2 列网格？

Why not show 2 colums Grid with Taiwind css?

css

reactjs

tailwind-css