Q:

Can I use React.Fragment for list rendering while have the "key" assigned?

Can I use React.Fragment inside the list rendering and assign a key to this 'Fragment' parent?
I'm trying to build a projects list layout using css grid, which requires all the elements is direct child of the container. Let's say the desired result will be look something like this.
<div className="container">

  <img src="imgPathFor1stProject">
  <h1>title for 1st project</h1>
  <p>description for 1st project</p>

  <img src="imgPathFor2ndProject">
  <h1>title for 2nd project</h1>
  <p>description for 2nd project</p>
  ...
</div>

But we all know the list render requires to return a single enclosing tag which we can tackle by using React.Fragment. Then the jsx will look like this:
projects.map(project => (
    <>
      <img src={project.imagePath}/>
      <h1>{project.title}</h2> 
      <p>{project.description}</p>
    </>
  ));

But here comes the problem, I can't assign a key to each child of the list since there's no actual element that wrapping all these elements.
I tried do: < key={project.id}> and <React.Fragment key={project.id}>, both doesn't work.
Is there a way to solve this? I still want to apply display:grid on .container element. 
Thanks!

A:

https://reactjs.org/docs/fragments.html
Keyed Fragments
Fragments declared with the explicit  syntax may have keys. A use case for this is mapping a collection to an array of fragments — for example, to create a description list:
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // Without the `key`, React will fire a key warning
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

