在網格視圖中顯示項目

Question

到目前為止，我試圖在網格視圖中顯示一些項目（卡片），這意味着當它們到達行尾時，它們 go 會返回以填充第二個，依此類推。 但是，無論我添加多少項目，我都將我的所有項目堆疊在一行中，它們總是越來越小，以便它們可以適應這一行。 順便說一句，如果有幫助的話，我正在構建一個反應應用程序。 到目前為止，這是我的代碼：

 import React from 'react'; import NavBar from '../../components/Navbar'; import CardLayout from '../../components/Card'; import './HomeScreen.css' const HomeScreen=()=>{ return( <> <NavBar/> <div className='general-container'> <CardLayout/> <CardLayout/> <CardLayout/> <CardLayout/> <CardLayout/> <CardLayout/> <CardLayout/> <CardLayout/> </div> </> ) } export default HomeScreen;

 *,*::before,*::after{ box-sizing: border-box; font-family:Arial, Helvetica, sans-serif; }.general-container{ display: flex; flex-direction: row; justify-content: space-between; column-gap: 15px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

這是一個同時使用 css 網格和 flex 的示例。 也許它會幫助你。

在 flex 示例中，如果您希望項目向左對齊而不是居中，您可以使用justify-content: flex-start 。

 .grid { display: grid; grid-gap: 15px; grid-template-columns: repeat( auto-fit, minmax(100px, 1fr)); margin-bottom: 2rem; }.flex { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 15px; }.card { height: 100px; width: 100px; }.card--grid { background-color: lightgreen; }.card--flex { background-color: lightblue; }

 <div class="grid"> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> <div class="card card--grid"></div> </div> <div class="flex"> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> <div class="card card--flex"></div> </div>

Answer 2

如果你分享你的導航欄和卡片布局組件代碼會很有幫助，但現在下面的鏈接可能會指導你React 中的響應式卡片網格