1-of-2 column under the medium breakpoint Question

[includecreative]

Hello - I've currently using 3-of-3 in a row to get 6 boxes displayed (3 rows, 2 x 3), I'd like this to break down to 1-of-2 at the medium breakpoint (e.g 3 x 2), using the 1-of-2 modifier works, but leaves a gap in where i would expect the 4th button to go, as obviously it's in a different row... Just wondered if there was any way to counter this?

Thanks!

[sebastianhelbig]

 // just for seeing the grid
 .grid div {
    height: 50px;
    border: 1px solid black;
}

$grid-namespace: "grid";
$grid-column-namespace: "grid-col";

    <div class="grid">
        <div class="grid-col grid-col--1-of-3 grid-col--m-1-of-2"></div>
        <div class="grid-col grid-col--1-of-3 grid-col--m-1-of-2"></div>
        <div class="grid-col grid-col--1-of-3 grid-col--m-1-of-2"></div>
        <div class="grid-col grid-col--1-of-3 grid-col--m-1-of-2"></div>
        <div class="grid-col grid-col--1-of-3 grid-col--m-1-of-2"></div>
        <div class="grid-col grid-col--1-of-3 grid-col--m-1-of-2"></div>
    </div>

Works for me. Mind sharing your code and grid settings?

[includecreative]

Hi - thanks for your response!

Code below - Grid settings are all the default;

                <div class="grid">
                    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-2">
                        <a href="#" class="service-button service-education" title="Education services">
                            <h3>Education</h3>
                            <p>Short sentence about services</p>
                        </a>
                    </div>  
                    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-2">
                        <a href="#" class="service-button service-health" title=" services">
                            <h3></h3>
                            <p>Short sentence about services</p>
                        </a>
                    </div>  
                    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-2">
                        <a href="#" class="service-button service-support" title="Support for families">
                            <h3>Support for families</h3>
                            <p>Short sentence about services</p>
                        </a>
                    </div>                                                  
                </div>
                <div class="grid">
                    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-2">
                        <a href="#" class="service-button service-adulthood" title="Preparing for adulthood">
                            <h3>Preparing for adulthood</h3>
                            <p>Short sentence about services</p>
                        </a>
                    </div>  
                    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-2">
                        <a href="#" class="service-button service-earlyyears" title="Early years and childcare services">
                            <h3>Early years &amp; childcare</h3>
                            <p>Short sentence about services</p>
                        </a>
                    </div>  
                    <div class="grid__col grid__col--1-of-3 grid__col--m-1-of-2">
                        <a href="#" class="service-button service-things" title="Things to do and places to go">
                            <h3>Things to do / Places to go</h3>
                            <p>Short sentence about services</p>
                        </a>
                    </div>                                                  
                </div>
                <div class="grid">
                    <div class="grid__col grid__col--3-of-3 grid__col--m-1-of-2">
                        <a href="#" class="service-button-long" title="How can my child or I get help?">
                            <h3>How can my child or I get help?</h3>                                
                        </a>
                    </div>                      
                </div>

End result looks like this on the medium breakpoint

EDIT - Figured it out, I was adding in two grid classes, one to contain each row of buttons, but it automatically contains them as there is a width constraint on the parent element.

Sorted. Thanks for the help 👍