Height of li the same in three grid column regardless of content

Question

I've seen this asked so many times, but what I'm trying doesn't seem to be working and I just need a bit of help/pointers in what I'm misunderstanding.

I read that display: table-cell etc isn't the way to go if you want a fluid, responsive grid so I don't want to use that method.

I basically have a list of elements in a grid which should be three columns width.

<ul>
  <li>
    <img src="test_img.png" />
    <p>Some title</p>
    <p>Some content...</p>
  </li>
</ul>

The amount of li tags are dependent on how many items I have in my database so I never know the exact amount of items or content. But they are always in a three column grid.

My css looks like:

ul {
    display: block;
    list-style: none;
    padding: 10px;
    font-size: 0;
    position: relative;
}
li {
  font-size: 14px;
   display: inline-block;
   vertical-align: top;
   width: 100%;
   }
img {
  width: 100%;
  height: 250px;
}

It looks like this since I'm going mobile first. So this all works fine until I hit tablet.

I'm struggling to understand how I'm able to get all the li tags to be the same height regardless of their content. I tried adding the ::after pseudo selector to them and positioning the pseudo selector absolute with the parent relative but the height didn't seem to change.

there is only ONE li tag (you write about "all li tags to be same heigth)?). Why do you put the p tags and the img in a ul with only one li? If you want to distribute them evenly, use a div as container (instead of ul and li) and give it "display: flex" — Johannes, Sep 22 '16 at 19:31
Possible duplicate https://stackoverflow.com/questions/46596170/how-to-get-header-from-cards-or-similar-to-have-the-same-height-with-flex-box — Asons, Jan 28 '18 at 12:35

The One and Only ChemistryBlob · Accepted Answer · 2016-09-22T19:28:47.467

0

Just hardcode a height and set a max-height as the same value:

li {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height:50px;
    max-height:50px;
    text-overflow:ellipsis; // in case there isn't enough room
}

edited Sep 22 '16 at 19:28

answered Sep 22 '16 at 19:25

The One and Only ChemistryBlob

7,864
10
36
69

I thought about this, but the text I get is pulled in from the database, so if the text is longer then the height it'll break the layout – pourmesomecode Sep 22 '16 at 19:28
Updated - you can use text-overflow if necessary and maybe a link such as "More..." – The One and Only ChemistryBlob Sep 22 '16 at 19:29

score 0 · Answer 2 · answered Sep 22 '16 at 19:25

If you are not using any kind of bg color or border that would show the list item height, then you could simply clear the item after every 3rd.

ul {
    display: block;
    list-style: none;
    padding: 10px;
    font-size: 0;
    position: relative;
}
li {
  font-size: 14px;
   float: left;
   vertical-align: top;
   width: 33.33%;
}
li:nth-child(3n+1){ clear: both; }
img {
  width: 100%;
  height: 250px;
}

<ul>
  <li>
    <img src="test_img.png" />
    <p>Some title</p>
    <p>Some content...</p>
  </li>
  <li>
    <img src="test_img.png" />
    <p>Some title 2</p>
    <p>Some content...<br /><br />Even more content<br />It keeps going..</p>
  </li>
  <li>
    <img src="test_img.png" />
    <p>Some title 3</p>
    <p>Some content...<br />and more content</p>
  </li>
  <li>
    <img src="test_img.png" />
    <p>Some title 4</p>
    <p>Some content...</p>
  </li>
</ul>

The background of the body is grey, and the background of the text is white. So you can see the height of them unfortunately :( — pourmesomecode, Sep 22 '16 at 19:28

Height of li the same in three grid column regardless of content

2 Answers2