我需要帮助设计一个使用 css 网格的 React 应用程序

Question

我有一个只有 3 个 jsx 文件的 React 应用程序，main.jsx、app.jsx 和 carousel.jsx 以及两个 CSS 文件 index.css 和 App.css。我只是将 Carousel 组件导入 app.jsx 并在 app.jsx 文件中围绕 carousel 组件放置一个 div。我很难使蓝色行的高度变小，并弄清楚如何摆脱额外的水平空间，当我使用手机查看器查看网站时，这一点更加明显。下面是蓝色行部分的旋转木马反应组件代码以及我所有的 CSS 样式和我的问题的几张照片，如果我遗漏任何信息让我知道，我会快速更新问题 反应轮播：

import { useEffect, useState } from "react";
import welding1 from './images/welding1.jpg'
import welding2 from './images/welding2.jpg'
import welding3 from './images/welding3.jpg'
import './App.css'


function Carousel() {
  const [index, setIndex] = useState(0);

  const mod = (n, m) => {
    let result = n % m;

    // Return a positive value
    return result >= 0 ? result : result + m;
  };

  const cards = [
    {
      id: "1",
      image: welding1,
    },
    {
      id: "2",
      image: welding2,
    },
    {
      id: "3",
      image: welding3,
    },
  ];

  useEffect(() => {
    setTimeout(() => {
      setIndex((index + 1) % cards.length);
      console.log(index);
    }, 3000);
  }, [index]);

  return (
    <div className="App">
      <div className="carousel">
        {cards.map((item, i) => {
          const indexLeft = mod(index - 1, cards.length);
          const indexRight = mod(index + 1, cards.length);

          let className = "card";

          if (i === index) {
            className = "card card--active";
          } else if (i === indexRight) {
            className = "card card--right";
          } else if (i === indexLeft) {
            className = "card card--left";
          } else className = "card";

          return (
            <img
              key={item.id}
              className={className}
              src={item.image}
              alt="Comic"
            ></img>
          );
        })}
      </div>
    </div>
  );
}

export default Carousel;

App.css:

.App {
  width: 100%;
  height: 100vh;

  /* fallback for old browsers */

  /* Chrome 10-25, Safari 5.1-6 */

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.carousel {
  width: 100%;
  height: 100%;
  position: relative;
}

.card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 15em;
  height: 15em;
  object-fit: cover;
  z-index: 0;
  opacity: 0;

  transition: 500ms;
}

.card--active {
  opacity: 1;
  transform: scale(1);
  z-index: 99;
}

.card--left {
  transform: translateX(-125%) scale(0.1);
  transition: 500ms;
  opacity: 0.3;
}

.card--right {
  transform: translateX(125%) scale(0.1);
  transition: 500ms;
  opacity: 0.3;
}

index.css:

body {
  margin: 0;
}/* removes that annoying extra space*/

html {
  background-color: black;
}

.container{
  height: 100vh;
  width:  100vw;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.contact{
  background-color: rebeccapurple;
  grid-column: 1/4;
  text-align: center;

}

.contact-btn{
  background-color: #F5F410;
  color: black;
  font-size: x-large;
  width: 10rem;
  height: 5rem;
  border-radius: 15px;
  border-style: none;
}

.about{
  background-color: red;
  grid-column: 1/4;
  font-size: x-large;
  text-align: center;

}

.carousel-div{
  background-color: blue;
  grid-column: 1/4;
}

.logo{
  background-color: pink;
  grid-column: 1/4;
  text-align: center;
}

.logo-img{
  width: 10rem;
}

p{
  color: white;
}

form{
  display: flex;
  flex-direction: column;
  align-items: center;
}

input{
  width: 20em;
  border-radius: 15px
}

.text{
  width: 25em;
  height: 7em;
 border-style: none;
}