如何在react中显示同一行的项目？

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <div className="item">项目1</div>
      <div className="item">项目2</div>
      <div className="item">项目3</div>
    </div>
  );
}

export default App;

.container {
  display: flex;
}

.item {
  flex: 1;
}

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="container">
      <div className="item">项目1</div>
      <div className="item">项目2</div>
      <div className="item">项目3</div>
    </div>
  );
}

export default App;

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  border: 1px solid black;
  padding: 10px;
}