CODEWITHSUNDEEP
csscss-grid
Rins
Rins

Reputation: 2191

CSS grid equal size columns

I'm trying to create 3 divs each containing 1 <p>-tag and distribute all 3 on the same row with an equal width using CSS grid.

Most sources say that I should use grid-template-columns to achieve this. Some say to go for 1fr 1fr 1fr, some say repeat(3, 1fr), and yet more say repeat(3, auto).

The result is the same. The 3 divs end up on the same line, but their widths change depending on the width of their content. Is there a way to force all 3 divs to have the same width and simply use the next line if the content is too wide?

The snippet should show the situation I'm in. 

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.content {
    margin: 2em;
}
    <div class="grid-container">
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
    </div>

Upvotes: 3

Views: 11815

Answers (3)

Giedrius nesvarbu
Giedrius nesvarbu

Reputation: 19

Try:

grid-template-columns: repeat(3, minmax(0, 1fr));

Upvotes: 1

fen1x
fen1x

Reputation: 5870

Your grid is fine - the content is the problem here.

You can try word-break or overflow as a workaround:

word-break solution:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px dotted green;
}

.content {
  margin: 2em;
  border: 2px solid red;
}

.content p {
  word-break: break-word;
}
<div class="grid-container">
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
</div>

overflow solution:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px dotted green;
}

.content {
  margin: 2em;
  border: 2px solid red;
  overflow: auto;
}
<div class="grid-container">
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
  <div class="content">
    <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
  </div>
</div>

EDIT: Apparently, word-break: break-word; does not work in Firefox - thanks, @Yaakov Ainspan. Another reminder that you should test your code in multiple browsers. word-break: break-all; can be used instead.

Upvotes: 6

yaakov
yaakov

Reputation: 4685

@fen1x's answer was close, but not quite. I experimented with this a bit, and found that word-break: break-all worked, while break-word did not. (The overflow solution sort of works, but isn't what the OP asked for).

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    max-width: 100%;
}

.content {
    margin: 2em;
    word-break: break-all;
}
<div class="grid-container">
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
        <div class="content">
            <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>
        </div>
    </div>

Additionally, this solution does not need to be applied to individual elements inside the grid item, but can be applied directly to the item.

Upvotes: 1

Related Questions