Tukukkk

I have a problem with CSS grid.

In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.

My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example.

Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.

Is there any property I have to or can use to solve this problem?

P.S. To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.

.grid {

  display: grid;

  grid-template-columns: auto;

}



.item {

  margin: 0 auto;

}



p {

  word-break: break-word;

  padding: 0 4%;

}

<div class="grid">

  <div class="item">

    <p>HOTEL</p>

    <p>GRAND</p>

  </div>

</div>

It's not a bug but a complex calculation.

There is a kind of cycle to calculate the final width of the element which create the issue. The width is first calculated considering the content (a shrink-to-fit behavior based on the properties you used) then using percentage value with padding will consider the calculated width¹. At the end, we will reduce the calculated padding from the width creating the word break.

This will happen with the smallest value since in all the cases the width will be less that the needed width to contain the longest word:

.grid {

  display: grid;

  grid-template-columns: auto;

}

.item {

  margin:auto;

  border:1px solid;

}

.pad p {

  word-break: break-word;

  padding: 0 1%;

}

<div class="grid">

  <div class="item">

    <p>HOTEL</p>

    <p>I_WILL_FOR_SURE_BREAK</p>

  </div>

</div>



<div class="grid">

  <div class="item pad">

    <p>HOTEL</p>

    <p>I_WILL_FOR_SURE_BREAK</p>

  </div>

</div>

As you can see, the first grid with padding is shrinked to its content and the second grid is having exactly the same width and the padding is creating the line break.

An easy fix is to use pixel value instead of percentage in case you know the value you want:

.grid {

  display: grid;

  grid-template-columns: auto;

  justify-content:center;

}



.item {

  margin:auto;

  border:1px solid;

}



.pad p {

  word-break: break-word;

  padding: 0 20px;

}

<div class="grid">

  <div class="item">

    <p>HOTEL</p>

    <p>I_WILL_NOT_BREAK</p>

  </div>

</div>



<div class="grid">

  <div class="item pad">

    <p>HOTEL</p>

    <p>I_WILL_NOT_BREAK</p>

  </div>

</div>

Why you don't see this on firefox?

Simply because break-word is not supported there (https://developer.mozilla.org/en-US/docs/Web/CSS/word-break)

So you will have an overflow instead of a word break. You may notice this behavior on firefox if you use break-all:

.grid {

  display: grid;

  grid-template-columns: auto;

}

.item {

  margin:auto;

  border:1px solid;

}

p {

  word-break: break-all;

  padding: 0 1%;

}

<div class="grid">

  <div class="item">

    <p>HOTEL</p>

    <p>I_WILL_FOR_SURE_BREAK</p>

  </div>

</div>

¹: The size of the padding as a percentage, relative to the width of the containing block.^ref

You wrote:

Even though there is enough space for the text to NOT get broken, it does create a line break just before the last letter.

Well, actually, there is not enough space for the text. That's why the word break occurs.

You have set the left and right margins to auto.

.item { margin: 0 auto; }

That causes the grid items to be horizontally centered and squeezed as much as possible.

By itself, this wouldn't break the word. But you've added horizontal padding and word-break: break-word (which is, by the way, an experimental value that isn't fully developed or implemented across browsers). This causes the word break in supporting browsers.

There is, however, a simple workaround that works across browsers (see below).

You wrote:

To my knowledge, the bug is not present in Firefox, I have found it in Chrome and Safari so far.

I'm not sure this is a bug, or just a property value under consideration.

You wrote:

Removing padding from content or margins from grid item does solve the issue, but margin is there for centering and padding is also needed.

You don't need auto margins to center the text.

You wrote:

Is there any property I have to or can use to solve this problem?

Yes. Use flex properties.

As explained above, the auto margins squeeze the grid items as much as possible. With word-break: break-word, Chrome sees an opportunity to squeeze more space out of the items by breaking the words.

Here's what it looks like:

(But, why does the margin: 0 auto–work-break: break-word combination stop after breaking one letter? In other words, why not squeeze the box until all letters are stacked, and the word reads vertically? Seems arbitrary. May be an interesting topic to explore, if the behavior persists after the property is stable across browsers.)

Here's a solution that may solve your overall problem:

.grid {

  display: grid;

  grid-template-columns: auto;

  border: 1px solid black;

  padding: 2px; /* demo only */

}



.item {

  /* margin: 0 auto; */

  border: 1px dashed red;

}



p {

  word-break: break-word;

  padding: 0 4%;



  /* new */  

  display: flex;

  justify-content: center;

  text-align: center;

}

<div class="grid">

  <div class="item">

    <p>HOTEL</p>

    <p>GRAND</p>

  </div>

</div>

More details: Centering in CSS Grid