3

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:

  • The first row contains only the first div (100% width)
  • The other div share the second row : each div will have the same width an the should totally fill the row.

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
jaudo
  • 2,022
  • 4
  • 28
  • 48

2 Answers2

4

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
-2

EDIT:

I thought this would work:

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

.child:first-child {
  grid-row: 1;
  grid-column: 1 / -1;
}

.child:not(:first-child) {
  grid-row: 2;
}

However, it seems that grid-column: 1 / -1 does not work for auto-columns. That is very unfortunate. Therefore, the best route here would be to use flexbox, as already pointed out.

Previous answer

You should be able to solve that like this:

.parent {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
}

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

The key there is grid-auto-flow which will establish that any unforeseen elements will be added as extra columns. With grid-auto-columns you can specify the default size of the automatically added columns.

Guilherme Müller
  • 55
  • 5