CSS Centering text in a grid, multi-column span

HTML-CSS
1

I set up a CSS grid, where row 1 is meant to only hold the title. Therefore, the title spans two columns. But when I specify the text-align: center, it only centers in the first column. How can I solve this? Or is grid not going to do what I want?

Here’s my CSS:

.title_text {
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}

.title_container {
  grid-row: 1;
  grid-column: 1 / 3;
}

.pad_container {
  grid-row: 2;
  grid-column: 1 / 2;
  border: 5px solid black;
}

.controls_container {
  grid-row: 2;
  grid-column: 2 / 3;
}

I believe this creates a two column, two row grid.

display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;

I put the title_text in row 1 and set it to use both columns.
.title_container {
grid-row: 1;
grid-column: 1 / 3; ( I also tried grid-column: 1 / span 2; )
}

The second row has two columns, each one with separate controls (pad_container and controls_container).

2

remove the centering bit, and have the grid do it for you?

.title_container {
  align-self: center;
  grid-row: 1;
  grid-column: 1 / 3;
}

Can’t remember if you want align-self or justify-self – on goes in the grid’s flow direction, the other goes cross-direction.

I keep referencing this great article on using grids.

3 Likes
3

Assuming I’m picturing you HTML correctly I would say that should work as you are expecting.

Try putting a temporary outline or border around that title_container and / or title_text to see the space it really occupies.

If that doesn’t illuminate your problem maybe post your html or a link to a codepen and someone will probably spot your problem.

1 Like
4

Thanks, snowmonkey. justify-self: center did it.

.title_text {

}

.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}

.title_container {
  justify-self: center;
  grid-row: 1;
  grid-column: 1 / 3;
}
5

In CSS grid justify-self aligns the item in the inline axis (row), whereas align-self aligns the item in the block axis (column). This is slightly different to flexbox practices where justify-self works along the main axis and align-self on the cross axis, which is all dependent on the flex-direction (set to either row or column).

6

Yeah, but I still have the little “L” painted in nail polish on the toe of my left sneaker…

2 Likes
7

Just an FYI, There is no justify-self in Flexbox.

It does make some sense but there are cases where it always seemed to me like it would be handy. Like a header with nav links and a logo. You would use justify-content: flex-end; on the container and then justify-self: flex-start; on the logo. But that doesn’t work.

|------------------------------------|
|                                    |
| Logo             link  link  link  |
|                                    |
|------------------------------------|