css grid shortcodes and wrap in wordpress

Question

I'm using a 12 column css grid with the classes .grid_1, .grid_2, .grid_3, .... .grid_12

I'd like to create shortcodes in wordpress. This is what I did for e.g. a 2 and 10 column style

function grid_2( $atts, $content = null ) {
return '<div class="grid_2">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('grid_2', 'grid_2');

function grid_10( $atts, $content = null ) {
    return '<div class="grid_10">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('grid_10', 'grid_10');

The problem is that those shortcodes need to be wrapped in a .row class to make it work

<div class="row">
   <div class="grid_2"></div>
   <div class="grid_10"></div>
</div>

Is there a simple solution how to wrap each grid style group into a row class when it's a multiple of 12 (as it's a 12 column grid)

e.g.

 <div class="grid_1"></div>
 <div class="grid_11"></div>

-> wrap this into a .row div

 <div class="grid_3"></div>
 <div class="grid_9"></div>

-> wrap this into a .row div, etc.

But maybe there's an even more simple solution to this... ???

I would be thankful for any help and/or advice!

Answer 1

I really like you question. This is how it is usually done in alot of themes that I have seen though.

function grid_row( $atts, $content = null ) {
return '<div class="row">' . do_shortcode( $content ) . '</div>';
}
add_shortcode('grid_row', 'grid_row');

Then use your shortcode like this:

[grid_row]
   [grid_2]Content Here[/grid_2]
   [grid_2]Content Here[/grid_2]
[/grid_row]

Output:

<div class="row">
   <div class="grid_2">Content Here</div>
   <div class="grid_2">Content Here</div>
</div>