vertical align grid container

Question

I managed to get the grid for my simple layout. Now I would like to center it vertically. How can I get it done? Important: I mean the whole wrapper (wrapping container/ whole grid), not the items within the container...

And a second question concerning this issue: is this effecting "grid-auto-flow: row dense;"?

html {box-sizing: border-box;}


body {}



.wrapper {
  display: grid;
  width: 100%;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-columns: 20% 20% 20%;
  grid-template-rows: 25% 25% 25%;
  justify-content: center;
  align-content: center;
  grid-auto-flow: row dense;
  }


.box
   {padding: 15px;
    border: 1px solid red;
    background: grey;}



.a {grid-column: 1 / span 2;
    grid-row: 1 / span 2;}

.b {grid-column: 3; grid-row: 1}

.c {grid-column: 3; grid-row: 2;}

.d {grid-column: 1; grid-row: 3}

.e {grid-column: 2; grid-row: 3}

.f {grid-column: 3; grid-row: 3}

<div class="wrapper">

<div class="box a">
<img src="" style="">
</div>

<div class="box b">
<img src="" style="">
</div>

<div class="box c">
<img src="" style="">
</div>

<div class="box d">
<img src="" style="">
</div>

<div class="box e">
<img src="" style="">
</div>

<div class="box f">
<img src="" style="">
</div>

Working fine in Chrome (and FF) for me: https://jsfiddle.net/4s0x7LLg/ — Michael Benjamin, Apr 24 '18 at 13:17
Thanks a lot for looking this up! I checked browser support for grid, my running system allows no actual chrome browser... — tiffsen, Apr 24 '18 at 22:53
https://jsfiddle.net/n9okrer3/ | https://stackoverflow.com/a/46546152/3597276 — Michael Benjamin, Apr 25 '18 at 15:15
thanks! but unfortunately this stretches or shrinks my container in height. Means, when screensize changes, all the boxes stretch together with the container. If I put images into the boxes, they lay over eachother or move far away from eachother (row-gap-rule gets lost somehow).. and "grid-auto-flow: row-dense" seems also have no effect? I would like to work with a "centering into the unknown" technique like I used to before, but inline-block and table tricks dont do it — tiffsen, Apr 25 '18 at 17:22

Xinchao · Accepted Answer · 2018-04-26T09:06:55.060

I assume you already know how to vertically center items inside a css grid.

What you could do now is to create yet another wrapper-of-wrapper div whose layout is either flexbox (vertical) or grid (with just 1 row and 1 column), then put your wrapper inside it.

html {box-sizing: border-box;}

.wrapper-of-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

.wrapper {
   
    height: 80%;

    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: 20% 20% 20%;
    grid-template-rows: 25% 25% 25%;
    justify-content: center;
    align-content: center;
    grid-auto-flow: row dense;
}

.box {
    padding: 15px;
    border: 1px solid red;
    background: grey;
}

.a {grid-column: 1 / span 2;
    grid-row: 1 / span 2;}

.b {grid-column: 3; grid-row: 1}

.c {grid-column: 3; grid-row: 2;}

.d {grid-column: 1; grid-row: 3}

.e {grid-column: 2; grid-row: 3}

.f {grid-column: 3; grid-row: 3}

<div class="wrapper-of-wrapper">
    <div class="wrapper">

        <div class="box a">
            <img src="" style="">
        </div>

        <div class="box b">
            <img src="" style="">
        </div>

        <div class="box c">
            <img src="" style="">
        </div>

        <div class="box d">
            <img src="" style="">
        </div>

        <div class="box e">
            <img src="" style="">
        </div>

        <div class="box f">
            <img src="" style="">
        </div>
    </div>
</div>

If you just want the wrapper to center in the flexbox but not to resize with it, set its height to auto and flex to 0 0 auto so that it will size to content, and will not shrink or grow.

good idea, using grid for it again or using flex. Unfortunately my methods to realize it didn't work. When I give that new wrapper-of-wrapper a concrete height (otherwise it wont work, right?), then I loose the proper alignment when screensizes change. — tiffsen, Apr 26 '18 at 01:19
you can make wrapper of wrapper always the same size of viewport. E.g.: position: fixed and height: 100%. Or just use 100vh — Xinchao, Apr 26 '18 at 01:26
Wow Xinchao, a moment of surprise and happiness, that works! Just some more questions for understanding: When I set the container to "height auto" and flex to "0 0": How to control the growing content in very big screens? Do I have to fear an eventually overflowing wrapper (cutted content) in some viewports? Is the best way for this to reduce the column-sizes or is there a more elegant way? And the other question is: How can I get "grid-auto-flow: row-dense " to work here? — tiffsen, Apr 26 '18 at 23:01
@tiffsen auto height means size to content. Your wrapper’s height will therefore be solely calculated based on what goes inside it. Once you set flex-grow and flex-shrink to 0, your wrapper will no longer response to the size change of wrapper-of-wrapper. So in short your wrapper will never be overflowed, but your wrapper might overflow wrapper-of-wrapper when the viewport size becomes too small to hold all your tiles in their original size. It all depends on whether it is okay for your tiles to resize — Xinchao, Apr 27 '18 at 03:15
yeah, that makes sense. Thank you lot, you've been a major support! — tiffsen, Apr 29 '18 at 15:03

vertical align grid container

1 Answers1