Question 174930 in CSS Question posted in
Some basic documentation can be found here.

What is the meaning of life?

I’m using CSS grid’s place-content: center to vertically and horizontally center a div in a fixed container, like so:

.outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
  place-content: center;
}
.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
}
<div class="outer">
<div class="inner">Some content here</div>
</div>

I would like the inner div to be full width, with a maximum width of 500px but it doesn’t seem to respect the width: 100% property as I would expect.

Can someone explain why this is happening and how to resolve it, if possible keeping the grid implementation (I know there are alternatives to centering things like this but I’d like to try to get this method working, out of curiosity more than anything else!)

Tags:

2

Answers


  1. 0

    You can use flex instead of grid, which allow you to do so really easily.

    .outer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inner {
  padding: 30px;
  background: white;
  width: 100%;
}
    <div class="outer">
  <div class="inner">Some content here</div>
</div>
    Login or Signup to reply.
  2. 0

    Instead of using place-items you can use place-self on the grid item.

    .outer {
  position: fixed;
  inset: 0;
  background: black;
  display: grid;
}

.inner {
  padding: 30px;
  background: white;
  width: 100%;
  max-width: 500px;
  place-self: center;
}
    <div class="outer">
  <div class="inner">Some content here</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search