How to set the height of the column equal to its content (CSS Grid Layout)?

Question

The example shows that the height of the columns is equal to the height of the largest column. How to set the height so that the height is equal to the contents of this column?

It works if the child element is set to height: max-content; but probably there is a standard method for this task?

 * { paddong: 0; margin: 0; } .wrapper { width: 600px; margin-left: auto; margin-right: auto; display: grid; grid-template-rows: 1fr; grid-template-columns: repeat(3, 1fr); grid-gap: 15px; } .wrapper > div { background: orange; }

 <div class="wrapper"> <div> Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. </div> <div> Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. </div> <div> Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный реторический вопрос скатился по его щеке и он продолжил свой путь. </div> </div

Air 10.6k five 21 52 · Accepted Answer · 2018-03-27T06:26:51

 * { padding: 0; margin: 0; } .wrapper { display: grid; grid: 600px auto / 1fr 1fr 1fr; grid-gap: 15px; grid-template-rows: 1fr; } .wrapper>div { background: orange; align-self: start; }

 <div class="wrapper"> <div> Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. </div> <div> Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. </div> <div> Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный реторический вопрос скатился по его щеке и он продолжил свой путь. </div> </div>

Please note that you have a typo in zeroing paddings and marjinov.

Fiddle https://jsfiddle.net/76yy4cyw/11/

Here is a great tutorial https://css-tricks.com/snippets/css/complete-guide-grid/

Solution 2.

By the way, in your case the floats would work

 **CSS** * { padding: 0; margin: 0; } .wrapper { width: 600px; margin: 0 auto; overflow: hidden; } .wrapper>div { background: orange; width: 190px; float: left; margin-right: 15px; } .wrapper>div:last-child { margin-right: 0; }

 <div class="wrapper"> <div> Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. </div> <div> Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. </div> <div> Взобравшись на первую вершину курсивных гор, бросил он последний взгляд назад, на силуэт своего родного города Буквоград, на заголовок деревни Алфавит и на подзаголовок своего переулка Строчка. Грустный реторический вопрос скатился по его щеке и он продолжил свой путь. </div> </div>

Fiddle https://jsfiddle.net/76yy4cyw/14/

But in this case there is no adaptability when the width of the main block is less than 600 pixels.

I remember once having solved a similar problem a long time ago in just this way, thanks!

How to set the height of the column equal to its content (CSS Grid Layout)?

1 answer 1

More articles: