0

I have the following HTML and CSS:

h3 {
  font-family: Tahoma;
}
p {
  width: 300px;
  box-shadow: 2px 2px 5px #888888;
  border-radius: 12px;
  background-color: rgba(255, 255, 0, 1);
}
ul {
  list-style-type: none;
}

#main_table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 8fr;
  grid-auto-rows: 1fr;
}
#img1 {
  background-color: lightblue;
}
li {
  border: 1px solid black;
}
#img2 {
  background-color: lightgreen;
}
#num1 {
  background-color: beige;
}
#text1 {
  background-color: pink;
}
<div id="main_table">
  <div id="img1">
    <ul>
      <li> image 1 </li>
      <li> image 2 </li>
    </ul>
  </div>
  <div id="img2">
    <ul>
      <li> image on first row </li>
      <li> second row </li>
    </ul>
  </div>
  <div id="num1">
    <ul>
      <li> 24 </li>
      <li> a long entry </li>
      <ul>
  </div>
  <div id="text1">
  </div>
</div>

As you can see, the rows of the li are not of equal length. Solutions here and here say to use grid-auto-rows: 1fr;, however as you can see in the above code this property is set and yet the rows are not of equal size.

enter image description here

Cheetaiean
  • 901
  • 1
  • 12
  • 26
  • You want them to have the same width or same height? Another question: the 4 on the same row or each one on a row? Thanks you – underflow Mar 01 '23 at 21:58
  • Same height, the width seems to be already set correctly by grid-template-columns. And I am fine with both same height for all rows, or just same height for any individual row. – Cheetaiean Mar 01 '23 at 22:01
  • 1
    The li elements are great grand children of the element that has display grid so are as it stands not affected by it. – A Haworth Mar 02 '23 at 00:03

1 Answers1

0

You need to set

grid-template-columns: 1fr 1fr 1fr 1fr;

And forget about the grid-auto-rows property

Code:

h3 {
  font-family: Tahoma;
}
p {
  width: 300px;
  box-shadow: 2px 2px 5px #888888;
  border-radius: 12px;
  background-color: rgba(255, 255, 0, 1);
}
ul {
  list-style-type: none;
}

#main_table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
#img1 {
  background-color: lightblue;
}
li {
  border: 1px solid black;
}
#img2 {
  background-color: lightgreen;
}
#num1 {
  background-color: beige;
}
#text1 {
  background-color: pink;
}
<div id="main_table">
  <div id="img1">
    <ul>
      <li> image 1 </li>
      <li> image 2 </li>
    </ul>
  </div>
  <div id="img2">
    <ul>
      <li> image on first row </li>
      <li> second row </li>
    </ul>
  </div>
  <div id="num1">
    <ul>
      <li> 24 </li>
      <li> a long entry </li>
    </ul>
  </div>
  <div id="text1">
  </div>
</div>
underflow
  • 1,545
  • 1
  • 5
  • 19
  • This adjusts the column size, not the row size. As you can see, the row heights in the green div are different from those in the blue div. – Cheetaiean Mar 01 '23 at 22:12