CODEWITHSUNDEEP
htmlcsscss-grid
blubberbo
blubberbo

Reputation: 4613

CSS Grid Center (Justify) Item Based on Row Width Instead of Item Width

I am wondering how I can justify an item using CSS Grid to the center of the row instead of just the specific item. In the snippet below, you can see how child2 (the red one) is centered only within that item, not the center of the entire row - it is a little too far to the right.

Is there anyway to accomplish this?

Here is a fiddle as well: https://jsfiddle.net/6ytqk7rL/

#parent {
  display:inline-grid;
  width:100%;
  grid-template-columns: [logo] 50px [title] auto;
  justify-items: center;
}
.child {
 background: blue;
 height:30px;
 width:30px;
}
#child2 {
  background: red;
  height: 30px;
  width: 30px;
} 
<div id="parent">
<div id="child1" class="child">

</div>
<div id="child2" class="child">

</div>
</div>

Upvotes: 1

Views: 49

Answers (1)

Chris J
Chris J

Reputation: 1447

If you want the red square to be central to the whole row, you'll need to offset it by the width of the first <div>that is to its left.

As elements, it current appears as follows:

enter image description here

So the red square is centrally aligned within its container. It can't automatically judge its position based on a parent - as a result, if you add a margin-left: -50px this compensates for the #child1 width you've defined in grid-templates-columns.

enter image description here

Upvotes: 1

Related Questions