1

I know how to center a cell within the available space - see example below. How can I adapt the below to position the "Two" cell in the center of the viewport, not just center it in the remaining space after "One One One". I have added second line with a "Two" to show where center is.

#one {
  grid-area: "one";
  justify-self: start;
  align-self: center;
}

#two {
  grid-area: "two";
  place-self: center;
}

#nav {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto;
  grid-template-areas: "one two";
}
#centered {
  text-align: center;
}
<div id="nav">
  <div id="one">One One One</div>
  <div id="two">Two</div>
</div>
<div id="centered">Two</div>
Max888
  • 3,089
  • 24
  • 55
  • It is unclear what you want to achieve - will two overlap one if it is centred to the viewport? If so, you would probably need some absolute positioning – Pete Sep 03 '18 at 11:51
  • @Pete Yes, I added the long line of "One One ..." to make it clear that the "Two" is not centered, but this means there would be overlap. I've removed most of the "One"s and added a second line to demonstrate where center is. So my question is, assuming there will be not overlap, how can I make the position of the "Two" in the first line, the same of the "Two" in the second line. – Max888 Sep 03 '18 at 12:17
  • If you don't want them to overlap then #two {grid-column: span 2} will do. – VXp Sep 03 '18 at 12:17
  • 1
    Again because you want it centred to the viewport and not remaining space, you need to absolutely position it, there is nothing that will make it stretch the full row but not allow overlapping – Pete Sep 03 '18 at 12:29

0 Answers0