CODEWITHSUNDEEP
css
user5715135
user5715135

Reputation:

Same Column Size

in My CMS I have a row with 4 column. each column has a picture, title, excerpt of content (50 words limit), date and button link to complete story.

The size of images, titles, excerpt (if the story less than 50 words) are not fixed. I want each columns which data come from database become fix in size the button at the bottom and image at the top and for fix the size white spaces spread in column space. I have tried many ways (bulma, css grid) and didn't get the perfect result. Tkx for guide.

enter image description here

Upvotes: 1

Views: 53

Answers (3)

lky
lky

Reputation: 1129

I would recommend using the following jquery plugin: https://github.com/liabru/jquery-match-height.

Upvotes: 0

Dániel Emőd Kovács
Dániel Emőd Kovács

Reputation: 446

To achieve what you want, you could use the new Grid Layout, however browser compatibility will be sub-optimal as of now. Using Flex Box will also achieve what you wanted. See this snippet:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
}

.col {
  width: 25%;
  display: flex;
}

article {
  margin: 10px;
  background: pink;
}

img {
  max-width: 100%;
}
<div class="container">
	<div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article...
      </p>
    </article>
  </div>
  <div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article... Some random text to fill in as the content of this article.. .
      </p>
    </article>
  </div>
  <div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article.. .Some random text to fill in as the content of this article.. . Some random text to fill in as the content of this article.. .
      </p>
    </article>
  </div> 
  <div class="col">
    <article>
      <h1>
        Title of my post
      </h1>
      <img src="http://via.placeholder.com/350x150">
      <p>
        Some random text to fill in as the content of this article...
      </p>
    </article>
  </div>
</div>

Your third option is to use JavaScript, like the following Gist I made for browsers that do not support flexbox: Gist with usage example.

Finally you could use display: table, however it is not very reliable and somewhat out-dated.

Upvotes: 0

Gaslan
Gaslan

Reputation: 808

You can try display: table and display: table-cell to do this:

My code example:

.container {
  display: table;
  width: 100%;
  border: 1px solid #bbb;
}

.block {
  display: table-cell;
  padding: 8px;
  border: 1px solid #bbb;
  width: 33%;
}
<div class="container">
  <div class="block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
    <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="block">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </div>
</div>

Upvotes: 1

Related Questions