We are in the process of adding tags to our website, and we want them to be dynamically generated from our CMS. Currently, all the tags render on the page and we can use them, but we would like the divs to adjust their width automatically based on the length of the text.
Here is an example of what we are aiming for:
https://i.sstatic.net/AbbuE.png
At the moment, the tags have a full width of the container, as shown in the image below:
https://i.sstatic.net/Sw5QL.png
Using CSS grid and styled-components, how can we achieve the auto-adjusting width of the divs?
This is the current code implementation:
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import styled from "styled-components"
import { H3, MediumText } from "../styles/TextStyles"
export default function CategorySection() {
const data = useStaticQuery(graphql`
query categoryQuery {
allGraphCmsCategory {
edges {
node {
id
title
slug
description
}
}
}
}
`)
return (
<Wrapper>
<ContentWrapper>
<TextWrapper>
<Title>Browse by Categories</Title>
<Description>
Use the category tags to narrow down what you are looking for.
</Description>
</TextWrapper>
<CategoryWrapper>
{data.allGraphCmsCategory.edges.map(tags => {
return (
<Categories key={tags.node.id}>{tags.node.title}</Categories>
)
})}
</CategoryWrapper>
</ContentWrapper>
</Wrapper>
)
}
const Wrapper = styled.div``
const ContentWrapper = styled.div``
const TextWrapper = styled.div``
const Title = styled(H3)``
const Description = styled(MediumText)``
const CategoryWrapper = styled.div``
const Categories = styled.div``