我有我想要的css網(wǎng)格布局。但是我被卡住了，因為我想要顯示在底部容器中的數(shù)據(jù)一直是垂直的，不會水平放置在第四行..我也不能得到我的。天文數(shù)據(jù)，標題在右邊。 這是我的css/ files代碼，我在下面的評論中添加了一個視覺圖像。唯一能糾正當前天氣和搜索欄的事情。

.container {
  display: grid; 
  grid-template-rows: 100px 200px 200px 200px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 0px;
 }

.current {
  grid-row-start: 2;
  grid-column-start: 1;
  grid-row-end: 4;
  grid-column-end: 4;
}

.forecast-data {
  grid-row-start: 4;
  grid-column-start: 1;
  grid-row-end: 5;
  grid-column-end: 6;
}
.search {
 
  grid-row-start: 1;
  grid-column-start: 5;
  grid-row-end: 2;
  grid-column-end: 6;
  
}
.astronomy{
  grid-row-start: 2;
  grid-column-start: 4;
  grid-row-end: 4;
  grid-column-end: 6;

}

.header-intro{
  grid-row-start: 1;
  grid-column-start: 2;
  grid-row-end: 2;
  grid-column-end: 5;
}

app.js file
 <div className='container'>
    <SignedIn>
      
      <UserButton />
      
      <User/>
      
      
      <div className='search'>
      <input type="text" value={cityname} onChange={handleInputChange}
      placeholder='Enter City or Country..'/>
      <button onClick={getWeatherData }>Search</button>
      </div>
      
      
      
      <Current weather={weather} />
      <Forecast forecast={forecast}/>
     
     

    </SignedIn>
    </div>

這是預測數(shù)據(jù)和天文學的地方

function Forecast({forecast}) {

    if (forecast.length === 0) {
        return <div>Loading forecast...</div>;
      }
    
      return (
        <div className="forecast-data">
          <h2>Weather Forecast:</h2>
          {forecast.map((day) => (
            <div key={day.date}>
              <h3>Date: {day.date}</h3>
              <p>Max Temperature: {day.day.maxtemp_f.toFixed()}°F</p>
              <p>Min Temperature: {day.day.mintemp_f.toFixed()}°F</p>
              <p>Average Temperature: {day.day.avgtemp_f.toFixed()}°F</p>
              <p>Chance of Rain: {day.day.daily_chance_of_rain.toFixed()}%</p>
              <p>Chance of Snow: {day.day.daily_chance_of_snow.toFixed()}%</p>
              <p>Condition: {day.day.condition.text}</p>
              <img src={`http:${day.day.condition.icon}`} alt={day.day.condition.text} />
            
            <div className="astronomy">

              <p>Sunrise: {day.astro.sunrise}</p>
              <p>Sunset: {day.astro.sunset}</p>
              <p>Moonrise: {day.astro.moonrise}</p>
              <p>Moonset: {day.astro.moonset}</p>
              <p>Moon Phase: {day.astro.moon_phase}</p>
              <p>Moon Illumination: {day.astro.moon_illumination}</p>
            </div>
            </div>
          ))}
        </div>
      );
    }