如何填充整个宽度(React.js)？

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

function App() {
  return (
    <div className="container">
      <div className="full-width">这个组件会填充整个宽度</div>
    </div>
  );
}

export default App;

/* App.css */
.container {
  display: flex;
}

.full-width {
  flex-grow: 1;
}

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

function App() {
  return (
    <div className="container">
      <div className="full-width">这个组件会填充整个宽度</div>
    </div>
  );
}

export default App;

/* App.css */
.container {
  display: grid;
}

.full-width {
  grid-column: 1 / -1; /* 从第一列到最后一列 */
}

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

function App() {
  return (
    <div className="container">
      <div className="full-width">这个组件会填充整个宽度</div>
    </div>
  );
}

export default App;

/* App.css */
.full-width {
  width: 100%;
}