CODEWITHSUNDEEP
htmlcsscss-grid
one-hand-octopus
one-hand-octopus

Reputation: 2743

How to stop grid item from stretching?

I have this simple grid:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, 1fr);
}

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}
<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

As you can see, I've defined the grid-gap to be 40px, but each grid item stretches horizontally as page width changes. I'd like the item to not stretch and simply occupy full space, so both vertical and horizontal gaps are 40px to form a nice 3*3 grid. How to achieve that?

Upvotes: 4

Views: 1222

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 370993

How to stop grid item from stretching?

The grid items are not stretching. They are exactly what you defined them to be:

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}

What's actually stretching are the grid columns, which you defined to consume all available space:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, 1fr); <-- fr units consume available space
}

Here's how the browser sees it:

enter image description here

  • You can see each column taking an equal portion of the row.

  • You can see the 40px grid gaps.

  • You can see that the grid items are placed at the start of each cell.

One simple and easy way to create the "nice 3x3 grid" that you want is to switch the dimensions from the grid items to the grid container:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, 40px);
  grid-auto-rows: 40px;
}

.item {
  background-color: grey;
}
<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Upvotes: 2

Temani Afif
Temani Afif

Reputation: 272589

Use auto instead of 1fr and align the content:

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, auto);
  place-content: start;
}

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}
<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Upvotes: 3

MarsFields
MarsFields

Reputation: 33

You could replace repeat(3, 1fr) with repeat(3, 40px):

.outGrid {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: repeat(3, 40px);
}

.item {
  width: 40px;
  height: 40px;
  background-color: grey;
}
<div class='outGrid'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Upvotes: 1

liquidot
liquidot

Reputation: 79

Change

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

To

  grid-template-columns: 40px 40px 40px

Or to any amount you want and change item width to 100%

Upvotes: 1

Related Questions