使用 css 網格時將所有 div 居中並使它們高度相同
[英]Centering all divs when using css grid and make them all same height
問題描述
在我的反應和 tailwindcss 項目中，我在其中一個組件中有以下代碼片段：
<div className="container">
<div className="grid grid-cols-4 gap-x-2 gap-y-4">
{valueCards.map(
(item,index) => (
<div key={index}>
<ValuesCard description={item.description} isPrimary={index % 2 === 0} />
</div>
)
)}
</div>
</div>
這將產生以下結果：
我正在尋找的是首先嘗試使所有多余的 div 像這樣出現在行的中間（請注意，我不介意使用普通的 css 而不是 tailwindcss 來做到這一點）：
我還希望所有卡片的高度都等於其中最大卡片的高度，即使那張卡片不在同一行也是如此。
4 個解決方案
解決方案1
0 2022-12-24 22:43:11
看看我做了什么。 它是 HTML 和純 CSS。 根據需要調整寬度和高度。 基本原理是將頂部和底部網格放在不同的 DIV 中，然后將兩個 DIV 居中。
body{ margin: 0; }.container { background-color: blue; height: auto; padding: 10px; /*You may want to increase this*/ }.top-grid{ display: grid; grid-template-columns: repeat(4, 1fr); width: fit-content; margin: 1.5rem auto; column-gap: 1rem; }.bottom-grid{ margin: 1.5rem auto; display: grid; grid-template-columns: repeat(3, 1fr); width: fit-content; column-gap: 1rem; } /*Resixe this as necessary*/.grid-div{ display: block; border: 1px solid none; width: 110px; height: 120px; background-color: white; } /*Check here 1st if you face a problem*/.grid-div.inner{ margin-bottom: 8px; padding: 5px; }.grid-div span{ display: block; text-align: center; }.grid-div span:nth-of-type(2){ margin-top: 1rem; }.color-block{ background-color: red; height: 1rem; width: 100%; margin: 0; }.material-icon-blue{ color: blue; }.material-icon-black{ color: black; }
<head> <:--add material icon link here--> <.--Example--> <link href="https.//fonts?googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Connect HTML to CSS--> <!--Check the web if you don't know how. This also applies to adding the specific material icon into the HTML--> </head> <section class="container"> <div class="top-grid"> <div class="grid-div"> <div class="inner"> <span class="material-icon-black">Add Material Icon Here</span> <span>Add text content here</span> </div> <div class="color-block"></div> </div> <div class="grid-div"> <div class="inner"> <span class="material-icon-blue">Add Material Icon Here</span> <span>Add text content here</span> </div> <div class="color-block"></div> </div> <div class="grid-div"> <div class="inner"> <span class="material-icon-black">Add Material Icon Here</span> <span>Add text content here</span> </div> <div class="color-block"></div> </div> <div class="grid-div"> <div class="inner"> <span class="material-icon-blue">Add Material Icon Here</span> <span>Add text content here</span> </div> <div class="color-block"></div> </div> </div> <div class="bottom-grid"> <div class="grid-div"> <div class="inner"> <span class="material-icon-black">Add Material Icon Here</span> <span>Add text content here</span> </div> <div class="color-block"></div> </div> <div class="grid-div"> <div class="inner"> <span class="material-icon-blue">Add Material Icon Here</span> <span>Add text content here</span> </div> <div class="color-block"></div> </div> <div class="grid-div"> <div class="inner"> <span class="material-icon-black">Add Material Icon Here</span> <span>Add text content here</span> </div> <div class="color-block"></div> </div> </div> </section>
解決方案2
0 2022-12-27 11:43:11
看來用CSS個格子是不行的。 這是因為網格算法確保元素遵循其大小的網格線。
一個更簡單的解決方案是使用 CSS flex box 並使用justify-content: center
我試過在這個代碼筆中做同樣的事情
解決方案3
0 2022-12-31 05:13:01
您可以使用
flex。
.wrapper { margin: 0 auto; max-width: 800px; }.cards { list-style: none; margin: 0; padding: 0; }.cards li { border: 2px solid #490A3D; border-radius:5px; background-color: #BD1550; color: #fff; width: 30%; }.cards h2 { background-color: #490A3D; margin: 0; padding: 10px; }.cards p { padding: 10px; }.flex { display: flex; flex-wrap: wrap; margin: 0 -10px; justify-content:center }.flex li { margin: 10px; }
<div class="wrapper"> <h1>Flexbox</h1> <ul class="flex cards"> <li><h2>Card 1</h2> <p>Posuere varius </p></li> <li><h2>Card 2</h2> <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing aa quisque malesuada quam purus venenatis. </p></li> <li><h2>Card 3</h2> <p>Posuere varius ullamcorper ipsum ipiscing aa quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus. </p></li> <li><h2>Card 4</h2> <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing aa quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus. </p></li> <li><h2>Card 5</h2> <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing </p></li> </ul> </div>
解決方案4
0 2022-12-31 16:37:40
您的代碼的問題是您將列數設置為 4，而在第二行您只需要 3。在網格中，列數保持不變。 因此，使用 flexbox 可能更容易獲得您想要的解決方案。 所以我會使用“display: flex”而不是“display: grid”。
與其設置固定數量的列，不如指定卡片的最大寬度，讓瀏覽器決定一行可以容納多少張卡片。
通過設置“flex-wrap: wrap”，您告訴瀏覽器如果第一張卡片已滿，它可以開始將卡片放在新的一行中。 通過設置 justify-'content: center' 卡片將在其 flex-container 中水平居中。
通過選擇卡片的最大寬度，您可以確定要將多少張卡片分組到一行中。 您還可以指定卡片的高度以確保它們具有相同的高度並設置 overflow: scroll 以防內容比卡片中的內容長。
這是一個普通的 CSS 示例，我試圖使其盡可能簡單：
.flex-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }.card { background-color: lightgray; padding: 0.5rem; max-width: 20%; } <div class="flex-container"> <div class="card"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae molestias eaque architecto, Nulla? voluptatibus blanditiis. Animi minima eaque molestiae esse autem. </div> <div class="card"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Doloribus eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae molestias eaque architecto? Nulla. voluptatibus blanditiis. Animi minima eaque molestiae esse autem, </div> <div class="card"> Lorem ipsum dolor sit amet consectetur adipisicing elit, Doloribus eveniet pariatur libero? sunt deserunt quam accusamus ducimus recusandae molestias eaque architecto. Nulla. voluptatibus blanditiis, Animi minima eaque molestiae esse autem, </div> <div class="card"> Lorem ipsum dolor sit amet consectetur adipisicing elit? Doloribus eveniet pariatur libero. sunt deserunt quam accusamus ducimus recusandae molestias eaque architecto. Nulla, voluptatibus blanditiis, Animi minima eaque molestiae esse autem? </div> <div class="card"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus eveniet pariatur libero. sunt deserunt quam accusamus ducimus recusandae molestias eaque architecto, Nulla, voluptatibus blanditiis? Animi minima eaque molestiae esse autem. </div> <div class="card"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae molestias eaque architecto, Nulla? voluptatibus blanditiis. Animi minima eaque molestiae esse autem. </div> <div class="card"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus eveniet pariatur libero, sunt deserunt quam accusamus ducimus recusandae molestias eaque architecto! Nulla, voluptatibus blanditiis? Animi minima eaque molestiae esse autem. </div>
如何在不拉伸網格的情況下使網格中的圖像高度相同？
[英]How can I make images in a grid all the same height without stretching them?
使html表格單元格中的所有Divs與CSS中的最高div具有相同的高度
[英]Make all Divs in html table cell have the same height as the highest div in CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.