Centering content in Foundation 6 Flex Grid

Question

I am using the Flex Grid component of Zurb Foundation 6 to create a grid of responsive squares -- and that works beautifully. For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc. There must be something I am missing -- thanks for your help.

Here is the jsfiddle (which is the base code without any attempt at centering).

<div class="row">
  <div class="square small-6 columns">
    ABC
  </div>
  <div class="square small-6 columns">
    DEF
  </div>
</div>
<div class="row">
  <div class="square small-6 columns">
    123
  </div>
  <div class="square small-6 columns">
    456
  </div>
</div>

.square {
  border: solid blue 1px;
  padding-bottom: 30%;
}

Are you telling me you use a JS framework for flexbox?? I have just checked the doc http://foundation.zurb.com/sites/docs/flex-grid.html I strongly suggest to learn "raw" flexbox, it's simple enough and it's the layout future. — damiano celent, Jan 25 '16 at 00:57
On that documentation page, there it is explained, but man, that stuff is kinda more complicated than just using flexbox without help. — damiano celent, Jan 25 '16 at 00:58

Michael Benjamin · Accepted Answer · 2016-01-25T01:18:42.173

2

For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc.

Well, the nested flex grid actually works:

.square {
    border: solid blue 1px;
    padding-bottom: 30%;

    display: flex;                /* new */
    justify-content: center;      /* new */
    align-items: center;          /* new */
}

It centers the content both vertically and horizontally.

The problem is that the boxes don't have any height. There's no space for the content to move vertically. What looks like height is actually padding, and that's outside the content box.

This is what the layout looks like without the padding-bottom: 30%: DEMO 1

Then add the nested flex container: DEMO 2

Then give the box some height: DEMO 3

Per the CSS Box Model, text goes in the content box. The padding is generally a content-free zone.

edited Jan 25 '16 at 01:18

answered Jan 25 '16 at 01:00

Michael Benjamin

346,931
104
581
701

I need the grid to be responsive and fixing the height (as in DEMO 3) breaks that -- just try expanding and shrinking your browser window for the demo. – RandomBits Jan 25 '16 at 03:04
The `padding-bottom: 30%;` in conjunction with the flex grid is what generates the square tiles. – RandomBits Jan 25 '16 at 03:09
The fixed height in DEMO 3 was just for illustration purposes. You can still make your grid responsive. Just use viewport units instead of pixels. Revised DEMO 3: https://jsfiddle.net/23pzeybr/7/ (re-size window both vertically and horizontally) – Michael Benjamin Jan 25 '16 at 03:10
The `hv`, `hw`, `hmin` and `hmax` units are useful and I crafted a solution around using them with your answer. The drawback to this is that the containers are relative to the viewport and not their parent, so, if you change the gutters, for example, you need to adjust your measurements for the squares. – RandomBits Jan 27 '16 at 15:23
If you want the containers to re-size relative to the parent, use percentages instead of viewport units. Just make sure the parent has a defined height. If the parent height is also a percentage, see here: http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Jan 27 '16 at 16:23
Then adjust sizing for screen size with media queries. – Michael Benjamin Jan 27 '16 at 16:24

score 1 · Answer 2 · answered Jan 25 '16 at 01:06

1

Here you go

li {
width:50%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}

That is it, does the trick. Responsive etc.

Link

http://codepen.io/damianocel/pen/WrMmGe

answered Jan 25 '16 at 01:06

damiano celent

721
6
12

I've looked at the `codepen` and I cannot figure out how to integrate the list idea with the grid. Maybe you can show me an example that produces a grid of squares? – RandomBits Jan 25 '16 at 03:12
Or, are you saying I should scrap the grid all together and just use lists? – RandomBits Jan 25 '16 at 03:13
@RandomBits Nono, just saying use pure flexbox, no need to use zurb foundation for this. A very simple link like http://the-echoplex.net/flexyboxes/ is all I ever use, try it, it's amazing stuff:-) – damiano celent Jan 25 '16 at 20:34

score 1 · Answer 3 · answered Jan 17 '17 at 11:57

You can do this with Foundation 6 (with Flex-Grid) only too.
The trick is to attach both align-spaced and align-middle to the outer row.

<div class="row align-spaced align-middle">
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>ABC</span>
    </div>
  </div>
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>DEF</span>
    </div>
  </div>
</div>
<div class="row align-spaced align-middle">
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>123</span>
    </div>
  </div>
  <div class="square small-6 row align-center">
    <div class="row align-middle">
      <span>456</span>
    </div>
  </div>
</div>

<style>
    .square {
      border: solid blue 1px;
      height: 30vh;
    }

</style>

as @michael-b points, the height is important.
Also, you can cut off one div layer if you do not need the blue line.

<div class="row align-spaced align-middle" style="height: 100px;">
  <div class="small-6 row align-center">
    <span>...</span>
  </div>
</div>

Centering content in Foundation 6 Flex Grid

3 Answers3