有没有一种方法可以在CSS网格中有两组列，每组50%？

gfttwv5a 于 2023-03-25 发布在其他

关注(0)|答案(4)|浏览(146)

我有一个css grid with 6 columns，但我想要的是有2组3，其中每个3占用50%的宽度，但每组是“左对齐”
所以如果我有...

#parent {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr) repeat(3, 1fr);
}

.cell {
  background-color: yellow;
}

.cell2 {
  background-color: lightblue;
}

<div id="parent">
  <div class="cell">Label 1</div>
  <div class="cell">60</div>
  <div class="cell">44</div>
  <div class="cell2">Label 2 (xxxx)</div>
  <div class="cell2">80</div>
  <div class="cell2">11</div>
</div>

也可以看到in this plunkr
这会给予我

但我想...

因此，每个“组”（组1是前3列，组2是最后3列）具有min-content的单元格，因此它们将在其50%宽度内根据需要增长。
这是一个简单的例子，在我的真实的中，divs的数量是Angular组件中的一个列表，标记中有一个*ngFor，所以我事先不知道div的总数（我知道它们总是以3个单元格为一组）
这是否可能与一个单一网格？

[更新1]

在试图使我的例子简单（与我的应用程序相比），我认为我过于简化（我的错误）。
这是一个我想展示的表，所以它可能有很多行，所以这确实意味着下面使用嵌套div的解决方案在有多个不同宽度标签的行时布局不太正确。
所以如果我有（从下面的解决方案之一）

<div id="parent">
  <!-- first row -->
  <div class="cell cell1">
    <div>Label 1</div>
    <div>60</div>
    <div>44</div>
  </div>
  <div class="cell cell2">
    <div>Label 2 (xxxx)</div>
    <div>80</div>
    <div>11</div>
  </div>

  <!-- second row -->
  <div class="cell cell1">
    <div>Label3 xxx</div>
    <div>60</div>
    <div>44</div>
  </div>
  <div class="cell cell1">
    <div>Label4 1xxx</div>
    <div>60</div>
    <div>44</div>
  </div>
</div>

#parent {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}

.cell {
  display: flex;
  gap: 1rem; 
}

.cell1{
  background-color: yellow;
}

.cell2 {
  background-color: lightblue;
}

我们可以看到列不会对齐（如在表中）

css

来源：https://stackoverflow.com/questions/75788288/is-there-a-way-to-have-2-groups-of-columns-50-each-in-a-css-grid

4条答案

按热度按时间

oxiaedzo1#

网格和flex的混合也是一个很好的解决方案。

#parent {
  width:100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
}

.cell-left, .cell-right {
  width:100%;
}

.cell-left {
  background-color: yellow;
}
.cell-right {
  background-color: lightblue;
}

.flex {
  display: flex;
  gap: 10px;
}

<div id="parent">
  <div class="flex cell-left">
    <div class="cell">Label 1</div>
    <div class="cell">60</div>
    <div class="cell">44</div>    
  </div>
  <div class="flex cell-right">
    <div class="cell2">Label 2 (xxxx)</div>
    <div class="cell2">80</div>      
    <div class="cell2">11</div>      
  </div>
</div>

赞(0）回复(0）举报 2023-03-25

kqlmhetl2#

您可以使用具有两列的网格，其中每列包含一个具有3个元素的弹性框。

#parent {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}

.cell {
  display: flex;
  gap: 1rem; //if needed
}

.cell1{
  background-color: yellow;
}

.cell2 {
  background-color: lightblue;
}

<div id="parent">
  <div class="cell cell1">
      <div>Label 1</div>
      <div>60</div>
      <div>44</div>
  </div>
  <div class="cell cell2">
      <div>Label 2 (xxxx)</div>
      <div>80</div>
      <div>11</div>
  </div>
</div>

如果你不需要顶层网格，你可以用2个嵌套的flexbox来达到同样的效果。注意，两个flex项的flex基数为0，使它们的大小相同。
一个二个一个一个

赞(0）回复(0）举报 2023-03-25

3pmvbmvn3#

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
}
.child-row{

display:flex;
padding-left:10px;
padding-right:10px;
}

<div id="container">
 
  <div class="child-row">
  <div>first--->  1.1</div>
  <div>content 1.2</div>            
  <div>content 1.3</div>
  </div>
  <div class="child-row">
  <div>content 1.1</div>
  <div>content 1.2</div>
  <div>content 1.3</div>
  </div>

 <div class="child-row">
 <div>second--->  2.1</div>
 <div>content 2.2</div>    
 <div>content 2.3</div>
 </div>
  <div class="child-row">
  <div>content 2.1</div>
  <div>content 2.2</div>
  <div>content 2.3</div>
  </div> 

  <div class="child-row">
  <div>third--->  3.1</div>
  <div>content 3.2</div>    
  <div>content 3.3</div>   
  </div>
  <div class="child-row">
  <div>content 3.1</div>
  <div>content 3.2</div>
  <div>content 3.3</div>
  </div>
</div>

赞(0）回复(0）举报 2023-03-25

brqmpdu14#

我想你需要minmax()函数：

#parent {
  display: grid;
  grid-template: 1fr / repeat(2, max-content max-content minmax(25%, 1fr));
}

/* For example only */
.cell { background-color: yellow; box-shadow: inset 0 0 2px #000; }
.cell:nth-child(6n+4),
.cell:nth-child(6n+5) { background-color: lightblue; }
.cell:nth-child(3n) { background-color: red; }

<div id="parent">
  <div class="cell">Label 1</div>
  <div class="cell">60</div>
  <div class="cell">44</div>
  
  <div class="cell">Label 2 (xxxx)</div>
  <div class="cell">80</div>
  <div class="cell">11</div>
  
  <div class="cell">Label 3 (xxxx)</div>
  <div class="cell">60</div>
  <div class="cell">44</div>
  
  <div class="cell">Label 4</div>
  <div class="cell">80</div>
  <div class="cell">11</div>
</div>

赞(0）回复(0）举报 2023-03-25

我来回答

有没有一种方法可以在CSS网格中有两组列，每组50%？

4条答案

相关问题

热门标签

最新问答