Asked  7 Months ago    Answers:  5   Viewed   24 times

So I have this grid:

+---------+------------------------------+---------+    
|  <div>  |  <p> - 1000 characters long  |  <div>  |
+---------+------------------------------+---------+

Inside p there's super long string with no spaces. divs are placeholders with fixed dimensions. This produces the above:

  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr) auto;

But changing minmax(0, 1fr) to 1fr gives this:

+---------+----------------------------------------+    
|  <div>  |               <p> - 1000 characters long  |  <div>  |
+---------+----------------------------------------+

It overflows out of its parent and way out of screen size. Why isn't it behaving like minmax?

Codepen

 Answers

55

Because 1fr is equivalent to minmax(auto, 1fr), by default.

When you use minmax(0, 1fr), that's something different than standalone 1fr.

In the first case, the track cannot be smaller than the size of the grid item (min size is auto).

In the second case, the track is free to resize to a 0 width/height.

More details:

  • Reconsider the meaning of 1fr
  • Prevent grid area from expanding causing whole page to scroll
Tuesday, June 1, 2021
 
NaeiKinDus
answered 7 Months ago
20

Update: As of PHP 5.4.1 you can finally var_dump DOM objects. See https://gist.github.com/2499678


It's a bug:

  • https://bugs.php.net/bug.php?id=48527
Monday, June 14, 2021
 
shin
answered 6 Months ago
16

The issue is that the grid cells are fine but the content inside (li) is not matching them.

enter image description here

Instead of using fixed width/height on the li you can consider percentage value and they will be a bit bigger in some cases but will remain square elements:

ul {
  display: grid;
  width: 260px;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 10px;
  list-style-type: none;
  border: 2px solid black;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: gray;
  animation:change 5s linear alternate infinite;
}

li {
  width: 100%;
  padding-top:100%;
}

@keyframes change {
  to {width:120px}
}
<ul class="palette">
  <li style="background-color: rgb(0, 0, 255);"></li>
  <li style="background-color: rgb(51, 51, 51);"></li>
  <li style="background-color: rgb(203, 58, 135);"></li>
  <li style="background-color: rgb(237, 106, 90);"></li>
  <li style="background-color: rgb(155, 193, 188);"></li>
  <li style="background-color: rgb(255, 247, 174);"></li>
  <li style="background-color: rgb(184, 51, 106);"></li>
  <li style="background-color: rgb(61, 44, 46);"></li>
  <li style="background-color: rgb(105, 173, 212);"></li>
  <li style="background-color: rgb(245, 223, 22);"></li>
  <li style="background-color: rgb(252, 186, 86);"></li>
  <li style="background-color: rgb(0, 185, 252);"></li>
  <li style="background-color: rgb(181, 141, 182);"></li>
  <li style="background-color: rgb(58, 50, 96);"></li>
</ul>
Tuesday, July 6, 2021
 
Fishingfon
answered 5 Months ago
72

This is covered by section 8.3.3 of the JLS:

Use of class variables whose declarations appear textually after the use is sometimes restricted, even though these class variables are in scope (§6.3). Specifically, it is a compile-time error if all of the following are true:

  • The declaration of a class variable in a class or interface C appears textually after a use of the class variable;

  • The use is a simple name in either a class variable initializer of C or a static initializer of C;

  • The use is not on the left hand side of an assignment;

  • C is the innermost class or interface enclosing the use.

Use of instance variables whose declarations appear textually after the use is sometimes restricted, even though these instance variables are in scope. Specifically, it is a compile-time error if all of the following are true:

  • The declaration of an instance variable in a class or interface C appears textually after a use of the instance variable;

  • The use is a simple name in either an instance variable initializer of C or an instance initializer of C;

  • The use is not on the left hand side of an assignment;

  • C is the innermost class or interface enclosing the use.

In your second case, the use isn't a simple name - you've got this explicitly. That means it doesn't comply with the second bullet in the second list quoted above, so there's no error.

If you change it to:

System.out.println("Test string is: " + testString);

... then it won't compile.

Or in the opposite direction, you can change the code in the static initializer block to:

System.out.println("Test string is: " + StaticInitialisation.testString);

Odd, but that's the way it goes.

Thursday, July 29, 2021
 
nfechner
answered 4 Months ago
10

Your problem is that your grid is the 'main' element and 'download_desc' is within the 'download' section tag.

Try moving:

display: grid;
grid-template-rows: 750px 500px 815px 815px 180px;
grid-template-columns: repeat(6, 1fr);

to the 'download' class.

Saturday, October 23, 2021
 
HuLu ViCa
answered 1 Month ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share