Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS have each grid element a different height

I have a grid with three columns and the height changes to fit all the text.

.main .contentWrapper {
    height:60%;
    margin-top:5%;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    grid-gap:10px;
    /*grid-template-rows: auto;*/
    height:auto;
}

.main .contentWrapper .box .boxText {
    padding:15px;
    height:25%;
    text-align:center;
    margin:0;
}

img {
    object-fit:cover;
    width:100%;
    height:400px;
    margin:0;
}

How can I make it so each box resizes to fit its own text, and they're not all the same height? As it is the first two columns resize to fit the largest piece of text which is in the third column.

box layout

like image 520
Fletch Avatar asked Mar 20 '19 04:03

Fletch


People also ask

How do you change the height in CSS grid?

The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout. The values are a space-separated list, where each value specifies the height of the respective row.

What is grid-gap CSS?

Definition and Usage. The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for the following properties: grid-row-gap.

What does 1FR mean in CSS?

Fr is a fractional unit and 1fr is for 1 part of the available space. The following are a few examples of the fr unit at work. The grid items in these examples are placed onto the grid with grid areas.


1 Answers

The default value of property align-items for a grid container is stretch which means each grid item will extend to the height of the grid row (to the largest item in the row if height is not set using grid-template-rows).

To change this you can just add align-items: flex-start to the grid container (.contentWrapper) - see demo below:

body {
  background: #ddd;
}

.contentWrapper {
  height: 60%;
  margin-top: 5%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  /*grid-template-rows: auto;*/
  height: auto;
  align-items: flex-start; /* ADDED */
}

.contentWrapper .box .boxText {
  padding: 15px;
  height: 25%;
  text-align: center;
  margin: 0;
}

.box {
  background: #fff;
}

img {
  object-fit: cover;
  width: 100%;
  height: 400px;
  margin: 0;
}
<div class="contentWrapper">
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here</div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here Some text here Some text here </div>
  </div>
  <div class="box">
    <img src="https://via.placeholder.com/400" />
    <div class="boxText">Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text
      here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here Some text here </div>
  </div>
</div>
like image 122
kukkuz Avatar answered Sep 28 '22 17:09

kukkuz