How to work with foundation css flexbox with horizontal and vertical direction?

Question

I'm trying to use foundation css flexbox in order to make the layout as in the first picture. We I try I get terrible results. When I put content in the grid boxes the content makes the grid boxes larger or smaller and don't match the nice layout I want.

<div class="row full-width">
<div class="column pl0 pr0 small-12 medium-8">
    <div class="hero inverted full-height"
         style="background-image: url(pic);">
        <div class="row">
            <div class="column small-12">
                <div class="hero-content">
                    <h1>
                        <small class="preHeading">Heading</small>

                        Text
                    </h1>

                    <p class="hero-text text-center">
                        A long text</p>

                    <div class="text-center">
                        <a href="#" class="button button-white button-large"
                           style="">
                            Find products
                        </a>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<div class="column small-12 medium-4 grid-x">
    <div class="row">
        <div class="column small-6 medium-12 pr0 pb2">
            <div class="hero inverted shrink" style="background-image: url(pic);">
                <div class="row">
                    <div class="column small-12">
                        <div class="hero-content">
                            <h3>

                                Text
                            </h3>


                            <div class="text-center">
                                <a href="#"
                                   class="button button-white button-large" style="">
                                    Find products
                                </a>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column small-6 medium-12 pr0">
            <div class="hero inverted shrink" style="background-image: url(pic);">
                <div class="row">
                    <div class="column small-12">
                        <div class="hero-content">
                            <h3>

                                Text
                            </h3>


                            <div class="text-center">
                                <a href="#"
                                   class="button button-white button-large" style="">
                                    Find products
                                </a>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

I want this
Wrong result 1
Wrong result 2

Do anyone have any suggestion on how to to this please?

Please update your Question with sample code, so that we can assist you — ram12393, Apr 13 '18 at 06:49
You are mixing grid-x and float grid classes. You can’t use both at the same time. Make sure you import the right modules if you use sass. — Luckyfella, Apr 13 '18 at 07:21
Im using PHP Laravel with sass and have imported the modules — Johann Malm, Apr 13 '18 at 07:23
How can I do so it looks like the first picture that I have a link to? — Johann Malm, Apr 13 '18 at 07:25

Luckyfella · Answer 1 · 2018-04-15T00:58:14.460

Don't know if that is the best way to go but you can do this:

<div class="grid-container">
<div class="grid-x grid-margin-x">
    <div class="small-6 cell" style="background-color: #aaaaaa;">
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
        <p>
            Content here to produce space
        </p>
    </div>
    <div class="small-6 cell">
        <div class="grid-y" style="height: 100%;">
            <div class="cell small-6" style="background-color: #cccccc; height: calc(50% - 0.9375rem); margin-bottom: 0.9375rem;">
                Vertical grid cell top
            </div>
            <div class="cell small-6" style="background-color: #333333; height: calc(50% - 0.9375rem); margin-top: 0.9375rem;">
                Vertical grid cell bottom
            </div>
        </div>
    </div>
</div>

You would have to adjust the 0.9375rem according to your gutter values. It's 50% of the value of your gutter. Inline styles in this example are just to give you code that can be checked quickly. So better set up css classes and use them. Otherwise you can't handle different gutters with media queries in your grid-y section.

Be sure to include at least this foundation modules:

@include foundation-global-styles;
@include foundation-xy-grid-classes;
@include foundation-flex-classes;

Do NOT load this once simultaniously:

// @include foundation-grid;
// @include foundation-flex-grid;

How to work with foundation css flexbox with horizontal and vertical direction?

1 Answers1