Trouble getting grid based table to be centered on the screen-CodePudding

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;
}

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

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.

CodePudding user response：

Don't use <center>; 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;
}

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

CodePudding user response：

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