反应式CSS网格的代码示例

1. 创建我们的应用程序

npx create-react-app my-react-grid  
cd my-react-grid
code .

1. 清理我们的应用程序：删除App.js中的所有内容，添加四个div：1）容器2）标题3）主体4）页脚，完成后应该是这个样子：

import "./App.css";

function App() {
  return (
    <div className="grid-container">
      <div className="header-container">Header</div>
      <div className="body-container">body</div>
      <div className="footer-container">Footer</div>
    </div>
  );
}

export default App;

接下来是清理我们的app.css：
删除所有内容，并添加以下代码:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header header header header"
    "body body body body body body"
    "footer footer footer footer footer footer";
  gap: 10px;
  padding: 10px;
}

.header-container {
  grid-area: header;
}
.body-container {
  grid-area: body;
  height: 100vh;
}
.footer-container {
  grid-area: footer;
}

网格模板区是我们在网格中建立单元格并为其分配名称的地方。
网格区属性指定了网格项目在网格布局中的大小和位置。
给主体一个100vh的高度允许它采取最大的高度，把标题推到顶部，把页脚推到底部。