如何获得具有可变列数的网格布局的grid-template-columns效果？ [英] How to get the effect of grid layout's grid-template-columns with a variable number of columns?

问题描述

我有一个div，其中包含可变数量的子代。此代码已生成，我无法对其进行修改。因此，只有CSS我需要在具有两行的表中显示div：

I have a div containing a variable number of children. This code is generated and I can't modify it. So with only CSS I need to display divs in a table with two rows:

• 第一行仅包含第一个div（宽度为100％ ）


• 另一个div共享第二行：每个div具有相同的宽度，应完全填满该行。

我尝试使用网格布局+ grid-template-columns，但是使用grid-template-columns并不是因为它假设我知道列数。例如，以下代码段仅在有四个孩子的情况下有效

I tried with a grid layout + grid-template-columns but using grid-template-columns does not because because it supposes I know the number of columns. For example, the following snippet only works if there are 4 children

.parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.child:nth-child(1) {
    grid-column: 1/-1;
}

Test with 3 children
<div class="parent" style="background-color:yellow;" >
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
</div>
Test with 4 children
<div class="parent" style="background-color:yellow;" >
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>
Test with 5 children
<div class="parent" style="background-color:yellow;" >
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
  <div class="child" style="background-color:purple;">5</div>
</div>

推荐答案

Flexbox可以满足您的需求

Flexbox can do what I think you are after

.parent {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
}

.child {
  flex: 1;
  padding: .25em 0;
  color:white;
  font-size:1.25em;
}

.child:nth-child(1) {
  flex: 1 0 100%;
}

Test with 3 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
</div>
Test with 4 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
</div>
Test with 5 children
<div class="parent" style="background-color:yellow;">
  <div class="child" style="background-color:red;">1</div>
  <div class="child" style="background-color:blue;">2</div>
  <div class="child" style="background-color:green;">3</div>
  <div class="child" style="background-color:orange;">4</div>
  <div class="child" style="background-color:purple;">5</div>
</div>

这篇关于如何获得具有可变列数的网格布局的grid-template-columns效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！