Trouble getting grid based table to be centered on the screen

Question

I created a simple credits table using divs and text formatted as a flex grid. However, I'm trying to set it so that the blue separator bar is always horizontally centered in the viewport (for all view sizes). However, when I adjust the width of the screen, I can tell that the table is slightly off and is not staying centered.

I created a simple CodePen to illustrate the problem:

https://codepen.io/Jdo300/pen/xxWarYL

.credits_container {
    position: relative;
    width: 100%;
    font-size: 22px;
    line-height: 1.5em;
}

.credits_row {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 47% 0fr;
    grid-column-gap: 1.6rem;
    min-height: 2.5rem;
}

.credits_left {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: end;
}

.credits_divider {
    position: relative;
    display: inline-block;
    width: 0.2rem;
    height: 100%;
    background-color: #087f9b;
}

.credits_right {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: start;
}

.block {
  width: 20px;
  height: 20px;
  background: blue;
}


  
    
      Lead writer
      
      Rodger Green
    
    
      Editors
      
      Lenny Samoah
    
    
      
      
      Michelle Johnson
    
    
      Web design
      
      Jonathan Doe
    
    
      
      
      Sean Chen
    
    
      
      
      Rachael Boe
    
    
      Web development
      
      Jimmy Lee
    
    
      
      
      Paul Miller
    
    
      Data visuals
      
      Chase Lim

I put a blue box at the bottom to show where the center should be so you can better see what is going on. I'm still getting my head around how to use flex grids so I'm sure there's something elementary that I'm just missing.

user_215552 · Answer

Don't use

; it was deprecated in HTML 4 and could stop working at any time. Rather than trying to make things 100% width and centering things inside, just use auto margins to let the browser figure it out.

Also, the fr unit for grids was made for this kind of stuff. Here I set the columns to use 1fr on either side of a 0.2rem column. The browser will work out how wide to make the fr to fit everything in.

.credits_container {
    position: relative;
    margin: 0 auto;
    font-size: 22px;
    line-height: 1.5em;
}

.credits_row {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 0.2rem 1fr;
    grid-column-gap: 1.6rem;
    min-height: 2.5rem;
}

.credits_left {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: end;
}

.credits_divider {
    position: relative;
    display: inline-block;
    width: 0.2rem;
    height: 100%;
    background-color: #087f9b;
}

.credits_right {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: start;
}

.block {
  width: 20px;
  height: 20px;
  background: blue;
  margin: 0 auto;
}


    
      Lead writer
      
      Rodger Green
    
    
      Editors
      
      Lenny Samoah
    
    
      
      
      Michelle Johnson
    
    
      Web design
      
      Jonathan Doe
    
    
      
      
      Sean Chen
    
    
      
      
      Rachael Boe
    
    
      Web development
      
      Jimmy Lee
    
    
      
      
      Paul Miller
    
    
      Data visuals
      
      Chase Lim

user_9323791 · Answer

Have you tried to change the percentage rate at the grid-template-columns: 47% 0fr; ? I've tried 48.5% 0fr and appeared centered.

Trouble getting grid based table to be centered on the screen

2 Answers