Grid align horizontal center is not works

Question

.parent{
  border:1px solid red;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
}

.child{
  background:green;
  align-self:center;
}


  
    I am child

I am looking a solution to let child should align itself to center. so i can create a class name for left, right, and center will use across.

user_7657915 · Answer

What's happening here for you is automatic grid placement. Technically speaking the item is aligned to the center inside the first column you created. The problem is that it ends up all the way on the left because that's where your first column actually is.

There's a few ways you can approach this if you want to continue using CSS Grid for this layout concept. But the problem with a 12 col grid is that there won't be a "center" without some offsetting or transforms.

I recommend you use the following if you really only need one row with 3 possible placements. It's a 13 col grid with a defined height of a single row, this ensures if the items are being shuffled out of order (if left is second like my example) that they won't jump to a second implied row.

.parent{
  border:1px solid red;
  display:grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: 60px;
}

.center{
  background:green;
  grid-column: 7/8;
  grid-row: 1/2;
}
.left {
  background: red;
  grid-column: 1/2;
  grid-row: 1/2;
}
.right {
  background: blue;
  grid-column: 13/14;
  grid-row: 1/2;
}


  
    I am child
  
  
    Me too
  
  
    Also me

Edit: You can also use flexbox and drop some of the complexity and get better responsiveness by using the order property and justifying the content as space-between.

.parent {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}

.center {
  background: green;
  order: 2
}

.left {
  background: red;
  order: 1
}

.right {
  background: blue;
  order: 3
}


  
    I am child
  
  
    Me too
  
  
    Also me

user_8620333 · Answer

Here is an optimized version with flexible values that can work with any number of columns.

I will consider CSS variables to easily adjust the template and the center element. For the left and right we only need 1 and -1

.parent{
  --n:6;
  
  display:grid;
  grid-template-columns: repeat(calc(2*var(--n)), 1fr);
  grid-auto-flow:dense;
  margin:5px;
 outline:1px solid;
}

.left{
  grid-column-start:1;
}
.right{
  grid-column-end:-1;
  text-align:right;
}
.center {
  grid-column:calc(var(--n))/span 2;
  text-align:center;
}


.parent > * {
 border:1px solid red;
}


  
    left
  
  
    right
  
  
    center
  



  
    left
  
  
    right
  
  
    center
  



  
    left
  
  
    right
  
  
    center

user_13045533 · Answer

.parent {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

Grid align horizontal center is not works

3 Answers