1

I am new to coding, still learning from online resources.

For website I am working on, I need to make four columns of "reviewers' quotes". I am using a CSS Grid to work on and its working beautifully. Except, all cells in the grid are equal height. Some quotes are shorter than others, leaving unsightly gaps. (there are many quotes and I am using four columns on desktop view). I want to make cells adjust height to size of content inside them.

How can I fix this? I am sure there is something very simple I am missing on. I am using this format:

    <div class="grid-container">
      <div class="grid-item">Quote01</div>
      <div class="grid-item">Quote02</div>
      <div class="grid-item">Quote03</div>
      <div class="grid-item">Quote04</div>
      <div class="grid-item">Quote05</div>
      <div class="grid-item">Quote06</div>
      <div class="grid-item">Quote07</div>
      <div class="grid-item">Quote08</div>
      <div class="grid-item">Quote09</div>
<div class="grid-item">Quote10</div>
<div class="grid-item">Quote11</div>
<div class="grid-item">Quote12</div>
    </div>

And the CSS is like this:

.grid-container {
    width: 80%;
    display: grid;
    grid-template-columns: auto auto auto auto;
    margin-left: auto;
    margin-right: auto;
}

This is the current clean, well aligned grid

This is how I want the grid's cell to inherit coontent size in height

user7460736
  • 11
  • 5
  • can you please add screenshot it will help to figure out issue. – Karar Barcha Nov 02 '20 at 12:39
  • @KararBarcha I quickly created these images in a graphic software. The top image is how the grid is right now. The bottom is how I would like it to behave, where the individual cells change height as per the content inside them. – user7460736 Nov 02 '20 at 14:29

0 Answers0