CODEWITHSUNDEEP
htmlcsscss-grid
tonitone106
tonitone106

Reputation: 159

How to determine the width of a grid-item when its width is auto and grid-container has justify-items set to something other than stretch

I am trying to workout how to determine the width of a grid-item when the grid-item's width: auto and justify-items is a value other than stretch.

In the example below I've noticed a few things.

I am looking at the first grid-item coloured red.

I am looking at its width.

When justify-items: start|end|center...

It seems that if you add 30px of either horizontal padding, border or margin (pbm) the content-area of the grid-item shrinks and the item's inline-dimension (padding, border, margin) stays within its cell.

However, it seems to be when pbm is 32px that the content-area stops shrinking and you can see the item's inline-dimension creep over its grid-cell. Why is this?

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px;
  grid-column-gap: 20px;
  font-size: 19px;
  justify-items: start;
  width: 100%;
}

.grid-container> :nth-child(1) {
  background-color: red;
  height: 100px;
  padding: 20px;
}

.grid-container> :nth-child(2) {
  background-color: orchid;
}

.grid-container> :nth-child(3) {
  background-color: yellowgreen;
}
<div class="grid-container">
  <div>Lorem ipsum dolor sit amet consecteturadipisicing elit. t incidunt facilis rem doloribus. ng elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
</div>

Upvotes: 0

Views: 351

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371929

With justify-items: stretch the grid items can shrink to fit their column.

From the spec:

The stretch keyword can cause elements to shrink, to fit their container.

And keep in mind that each columns has a fixed width of 200px.

.grid-container {
    grid-template-columns: 200px 200px 200px;
}

With other values for justify-items, such as start and center, the grid item can exceed the column width based on content, padding, borders and margins.

In the case of the first column in the question, the source of the problem is a long string of text:

"consecteturadipisicing"

Break that up and the problem is resolved for all practical purposes.

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px;
  grid-column-gap: 20px;
  font-size: 19px;
  justify-items: start;
  width: 100%;
}

.grid-container> :nth-child(1) {
  background-color: red;
  height: 100px;
  padding: 20px;
}

.grid-container> :nth-child(2) {
  background-color: orchid;
}

.grid-container> :nth-child(3) {
  background-color: yellowgreen;
}
<div class="grid-container">
  <div>Lorem ipsum dolor sit amet con sec tetura dipi sicing elit. t incidunt facilis rem doloribus. ng elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
</div>

Upvotes: 0

Related Questions