Limit the width of a column to the width of a particular grid item

Question

I have this simple use case: an item title and description. The title should appear above the description and I want the title to determine the width of the entire column, also for the 'description' row.

Is that possible with CSS Grid, and if so, how?

This is the desired output:

And that's the code, basically:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

Michael Benjamin · Accepted Answer · 2017-11-23T15:04:08.787

4

Instead of setting the column width to 1fr, use min-content.

With min-content, the column will take all line break (text wrapping) opportunities.

It basically wraps all text until the column reaches the width of the longest word.

.grid-container {
  display: grid;
  grid-template-columns: min-content; /* formerly 1fr */
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

Then, suppress the line breaks in the title box:

.grid-container {
  display: grid;
  grid-template-columns: min-content;
}

.A {
  white-space: nowrap;
  background-color: lightgreen; /* just for illustration */
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

References:

edited Nov 23 '17 at 15:04

answered Nov 23 '17 at 12:42

Michael Benjamin

346,931
104
581
701

1

Super! It worked beautifully! I'm a newcomer to CSS Grid and hardly an expert in plain old CSS. One comment for others: I'm doing this on Angular 5 + Material 2, which as of now, will give white-space: nowrap by default to any mat-nav-list. In that case, the above wouldn't work until you manually 'reset' back the second paragraph's white-space to normal. One thing I still lack - I don't get the 'ellipsis' when the text is too long in the 'title' grid item (the first). Is that possible to achieve, if the container of the grid-container limits the space for the entire grid? Thanks again! – Boaz Rymland Nov 23 '17 at 17:06
1

You're welcome. Here's a try at the ellipsis problem: https://jsfiddle.net/uutmsLoh/ – Michael Benjamin Nov 23 '17 at 17:16
1

Actually, my use case is more complex hence this (ellipsis thingy) doesn't work for me but I think I can take it from here. Thanks for the swift assistance! – Boaz Rymland Nov 23 '17 at 20:54
1

This is good. I did not know it was possible at all. ( new to grid myself ) – J.T. Houtenbos Nov 24 '17 at 12:50

score 1 · Answer 2 · answered Nov 23 '17 at 11:26

I do not think this is possible with grid (or any other CSS display type without explicitly setting the width). CSS-tricks has a comprehensive guide on grid if you are interested in it:

https://css-tricks.com/snippets/css/complete-guide-grid/

I know you asked for a CSS solution, but just in case you don't find it here is a jQuery solution:

$( document ).ready(function() {
 $('.B').outerWidth($('.A').outerWidth()).show();
});

.A{
  display: table;
}
.B{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)    
  </div>
</div>

Limit the width of a column to the width of a particular grid item

2 Answers2

Linked