I have a page with plugins from a Minecraft game. As planned, the page should be in 2 columns, but for some reason everything goes in 1 column, and on the right there is an empty space for the second column. I've been trying to fix this error for an hour now.
I am using React and Tailwind. Screenshot of how this page looks like now:
How you see in screenshot, the space on the right is empty.
Here is code if my component:
<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>
Also i try add grid grid-cols-2 gap-2, but it doesn't change page, it's change TitledGreyBox, maybe i add it in wrong space?
Where can be a problem? I would be grateful for the help, because I cannot understand what is wrong.
CodePudding user response：
you should wrap the outermost div (where you are using display: "grid" property) to your map functionality; not inside, something like this- .
<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>