title: How do I control individual grid items within a grid?
body: <p>I'm trying to render out a grid, that displays information on various web projects. I have the parent component <code>Projects.js</code> that maps through project data, which is then passed as props to the component displaying each individual project, <code>Project.js</code>. However I can't seem to control size of each grid item, and I think it's to do with how I've structured the CSS classes.</p>
  <p>What I want are perfect squares in the grid, without any space between the grid items, nor without any space between adjacent elements. Any suggestions?</p>
  <p><strong>Projects.js</strong></p>
  <pre><code>import Project from &quot;./Project&quot;
  import projects from &quot;../project-data&quot;
  
  const Projects = () =&gt; {
    return (
      &lt;div className=&quot;row&quot;&gt;
        &lt;div className=&quot;bottom-section&quot;&gt;
          &lt;div className=&quot;bottom-section-left&quot;&gt;left section&lt;/div&gt;
  
            //here is the grid container
          &lt;div className=&quot;grid-container&quot;&gt;
            {projects.map((item) =&gt; {
              return (
                &lt;Project
                  name={item.name}
                  url={item.url}
                  image={item.image}
                  techStack={item.techStack}
                  blurb={item.blurb}
                /&gt;
              );
            })}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Projects
  </code></pre>
  <p><strong>Project.js</strong></p>
  <pre><code>import { useState } from 'react'
  
  const Project = ({ name, url, techStack, image, blurb }) =&gt; {
    const [isMouseHovering, setMouseHovering] = useState(false);
  
    const handleOnMouseOver = () =&gt; {
      setMouseHovering((isMouseHovering) =&gt; !isMouseHovering);
    };
  
    const handleMouseOut = () =&gt; {
      setMouseHovering(false);
    };
  
    return (
      &lt;div onMouseOver={handleOnMouseOver} onMouseOut={handleMouseOut}&gt;
        {isMouseHovering ? (
          &lt;div className=&quot;grid-item&quot;&gt;
            &lt;h1&gt;{name}&lt;/h1&gt;
            &lt;a href={url}&gt;
              &lt;p&gt;website&lt;/p&gt;
            &lt;/a&gt;
            &lt;p&gt;{techStack}&lt;/p&gt;
            &lt;p&gt;{blurb}&lt;/p&gt;
          &lt;/div&gt;
        ) : (
          &lt;p&gt;{name}&lt;/p&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default Project
  </code></pre>
  <p><strong>Styles.css</strong></p>
  <pre><code>.grid-container {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    flex: 0 0 70%;
    grid-auto-rows: 10em;
  }
  </code></pre>