使用css网格时将所有div居中并使其高度相同

siv3szwd 于 2022-12-27 发布在其他

关注(0)|答案(2)|浏览(157)

- bounty将在7天后过期**。回答此问题的人有资格获得+50的声望奖励。Daniel_Kamel希望吸引更多人关注此问题。

在我的react和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）：

我也希望所有的卡都有相同的高度等于其中最大的卡的高度，即使这张卡不在同一行。

css

来源：https://stackoverflow.com/questions/74910353/centering-all-divs-when-using-css-grid-and-make-them-all-same-height

2条答案

按热度按时间

slwdgvem1#

看看我做了什么。这是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>

赞(0）回复(0）举报 2022-12-27

vs91vp4v2#

看起来用CSS网格是不可能做到的。这是因为网格算法确保元素按照网格线的大小排列。
更简单的解决方案是使用CSS flex box和justify-content: center
我尝试过执行相同的here in this code pen

赞(0）回复(0）举报 2022-12-27