Ensuring equal growth of columns and rows in CSS grid when there is overflow: how can it be achieved?

Question

Ensuring equal growth of columns and rows in CSS grid when there is overflow: how can it be achieved?

While working on my project, I've noticed inconsistency in the behavior of the random grids I'm generating with JavaScript. I specify a set number of columns and rows for the grid, as well as the start and end values of the cells independently. My goal is to have cells grow when their content overflows beyond the minimum value of 50px, causing cells in the same row to also expand accordingly. You can view an example on this Fiddle.

In my current setup:

grid-template-rows: repeat(4, minmax(50px, auto));

However, you'll notice that only the 3rd row grows while the 4th row remains unchanged. To fix this, I adjusted the line to:

grid-template-rows: repeat(4, minmax(50px, 1fr));

Yet, this causes all rows to increase evenly when there's overflow, which is not the desired outcome. For reference, check out this updated Fiddle.

Interestingly, when overflowing the 6th cell instead of the 4th, the 2nd and 3rd rows grow uniformly since the 6th cell spans both rows. This aligns with my expectations, as seen in this alternative scenario. However, I'm still puzzled by why the initial issue persists.

Could this be a bug? Observing the same behavior across Chrome and Firefox leads me to believe that I might be overlooking something rather than it being a technical glitch.

html css css-grid

Answer 1

Answer №1

The distinguishing factor in your initial fiddle is the absence of a single-row spanning element in the third row compared to the fourth row.

To resolve this issue, you can simply add filler elements to fill up all the rows as shown below:

When calculating the grid dimensions, items that span only one row are given priority due to their rigid restrictions within that specific row.

Subsequently, items spanning two rows are considered. If both rows are occupied and the item exceeds the available space, both rows expand. However, if only one row has been calculated with elements and the other remains uncalculated, it is best to maintain the dimension of the existing row and only extend the latter one.

body{margin:0;padding:20px;font-size:24px;font-family:sans-serif}
body > div{
  display: grid;
  max-width: 500px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(4, minmax(50px, auto));
  grid-gap: 20px;
}
body > div > div{
  padding: 20px;
  background-color: #CCC;
}
body > div > div:nth-child(1){
  grid-row-start:    1;
  grid-column-start: 1;
}
body > div > div:nth-child(2){
  grid-row-start:    1;
  grid-column-start: 2;
}
body > div > div:nth-child(3){
  grid-row-start:    1;
  grid-row-end:      3;
  grid-column-start: 3;
}
body > div > div:nth-child(4){
  grid-row-start:    3;
  grid-row-end:      5;
  grid-column-start: 2;
}
body > div > div:nth-child(5){
  grid-row-start:    4;
  grid-column-start: 1;
}
body > div > div:nth-child(6){
  grid-row-start:    2;
  grid-row-end:      4;
  grid-column-start: 1;
}

<div class="test">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
  <div>5</div>
  <div>6</div>
  <filler></filler>
  <filler></filler>
  <filler></filler>
  <filler></filler>
</div>

Answer 2

The distinguishing factor in your initial fiddle is the absence of a single-row spanning element in the third row compared to the fourth row.

To resolve this issue, you can simply add filler elements to fill up all the rows as shown below:

When calculating the grid dimensions, items that span only one row are given priority due to their rigid restrictions within that specific row.

Subsequently, items spanning two rows are considered. If both rows are occupied and the item exceeds the available space, both rows expand. However, if only one row has been calculated with elements and the other remains uncalculated, it is best to maintain the dimension of the existing row and only extend the latter one.

body{margin:0;padding:20px;font-size:24px;font-family:sans-serif}
body > div{
  display: grid;
  max-width: 500px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:    repeat(4, minmax(50px, auto));
  grid-gap: 20px;
}
body > div > div{
  padding: 20px;
  background-color: #CCC;
}
body > div > div:nth-child(1){
  grid-row-start:    1;
  grid-column-start: 1;
}
body > div > div:nth-child(2){
  grid-row-start:    1;
  grid-column-start: 2;
}
body > div > div:nth-child(3){
  grid-row-start:    1;
  grid-row-end:      3;
  grid-column-start: 3;
}
body > div > div:nth-child(4){
  grid-row-start:    3;
  grid-row-end:      5;
  grid-column-start: 2;
}
body > div > div:nth-child(5){
  grid-row-start:    4;
  grid-column-start: 1;
}
body > div > div:nth-child(6){
  grid-row-start:    2;
  grid-row-end:      4;
  grid-column-start: 1;
}

<div class="test">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4<br>4<br>4<br>4<br>4<br>4<br>4</div>
  <div>5</div>
  <div>6</div>
  <filler></filler>
  <filler></filler>
  <filler></filler>
  <filler></filler>
</div>

Answer 3

Answer №2

In my opinion, it's not necessary to define grid-row-end individually for each element. It would be more efficient to ensure that all rows have identical grid-row-start values. I trust this achieves the intended outcome:

View the demo.

Answer 4

In my opinion, it's not necessary to define grid-row-end individually for each element. It would be more efficient to ensure that all rows have identical grid-row-start values. I trust this achieves the intended outcome:

View the demo.

Ensuring equal growth of columns and rows in CSS grid when there is overflow: how can it be achieved?

Answer №1

Answer №2

Similar questions

CSS flexbox completely collapses all child elements that are empty

What is the best method for applying a style specifically to controls located on the lower part of the

Fully conceal a DIV while the webpage is loading

Developing a dynamic scheduling system with PHP

What are the best ways to ensure that my side menu, bottom buttons, and content are all responsive

Adjust the loading bar component in Material UI to allow for customizable color changes

Executing a TypeScript function directly in HTML without the need for a click event

Implementing checkboxes for each API data in JavaScript

JavaScript tip: How to disregard symbols that affect the length of text in a textbox?

Tips on making a progress bar with a reverse text color for the "completed" section

What is the best way to incorporate a <c:forEach> loop into JSP operations?

Get the nearest offspring of the guardian

Develop a chart featuring sub-categories and column headings

Unable to implement the bootstrap panel class as expected

Stop the replication of HTML/CSS styles during the extraction of content from a div

Obtain the image format from an HTML page using the Jsoup library on Android

Creating a CSS-only carousel - Ensuring its correctness (especially in terms of height)

Review and add alt attributes to images that are missing them

Area of Interest - Underline

Unable to establish the relative placement of Div elements