title: CSS Grid - Adjusting to content within div
body: <p>I'm about to implement tags on our website, and we want to add them dynamically from our CMS. All tags renders on page and we are able to use the tags, though we would like the div's to auto adjust to the text length.</p>
  <p>See an example of the end goal:</p>
  <p><a href="https://i.stack.imgur.com/AbbuE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AbbuE.png" alt="enter image description here" /></a></p>
  <p>Right now the tags are having full width of the container like the image below:</p>
  <p><a href="https://i.stack.imgur.com/Sw5QL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sw5QL.png" alt="enter image description here" /></a></p>
  <p>Using CSS grid and styled-components, how can we accomplish auto adjusting width of div's?</p>
  <p>This is how the code is now:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;
  import { graphql, useStaticQuery } from &quot;gatsby&quot;
  import styled from &quot;styled-components&quot;
  import { H3, MediumText } from &quot;../styles/TextStyles&quot;
  
  export default function CategorySection() {
    const data = useStaticQuery(graphql`
      query categoryQuery {
        allGraphCmsCategory {
          edges {
            node {
              id
              title
              slug
              description
            }
          }
        }
      }
    `)
  
     return (
      &lt;Wrapper&gt;
        &lt;ContentWrapper&gt;
          &lt;TextWrapper&gt;
            &lt;Title&gt;Browse by Categories&lt;/Title&gt;
            &lt;Description&gt;
              Use the category tags to narrow down what you are looking for.
            &lt;/Description&gt;
          &lt;/TextWrapper&gt;
          &lt;CategoryWrapper&gt;
            {data.allGraphCmsCategory.edges.map(tags =&gt; {
              return (
                &lt;Categories key={tags.node.id}&gt;{tags.node.title}&lt;/Categories&gt;
              )
            })}
          &lt;/CategoryWrapper&gt;
        &lt;/ContentWrapper&gt;
      &lt;/Wrapper&gt;
    )
  }
  
  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``
  </code></pre>