使用CSS网格的React Component无法正确布局

Question

我试图在大屏幕中为每一行并排放置两列，我有信息框but they are not filling up the row as i want.following rows are same and only have 1 picture like this

这是我的scss代码

@import "./Navbar.scss";
.tourlist{width:70vw; margin:0 auto;padding:2rem 0; }
.alltogether{background:$mygray ;border-radius:0.7rem;margin:1rem 0;
img{width:100%; border-top-left-radius:0.7rem;
    border-top-right-radius:0.7rem ; display:block    }
}
.img-containers{position:relative; &:hover{.fa-window-close{opacity:1 }  } }
.fa-window-close{position:absolute;cursor:pointer;transition:all 0.3s linear;opacity:0;display:block;
right:0.4%};
.tourinfos{padding:1rem 0.5rem; h3{text-transform:uppercase;color:$mygreen;margin-top:1rem};h4{color:$myblack} 
p{margin-top:0.7rem ;font-size:19px ;} }

@media screen and (min-width:768px) {.tourlist {    
display:grid;
grid-template-columns:1fr 1fr;
grid-column-gap:1.3rem;

 }  }

这将导入信息和映射组件，并且可以正常工作

import React, { Component } from 'react';
import './App.css';
import Navbar from "./components/Navbar.js"
import CityTour from "./CityTour.js"
import "./components/tourlist.scss"
class App extends Component {
  render() {
    return (<div >
     <Navbar />
     <div class="tourlist ">

      <CityTour />
      </div>
      </div>
    );
  }
}

export default App;