Example: Responsive CSS Grid – instructions below.

Old Phone

Spam Protection

The Module above is a Text Module using CSS to create a grid.

First Style the Grid in Divi >Options >Custom CSS

.jontainer { 
display: grid; 
grid-template-columns: 30% 30% 30%; 
grid-template-rows: 30% 30%; 
column-gap: 1rem;
row-gap: 3rem;

This HTML creates the grid layout after that
you can use the Visual Editor to put things into each div <div class=”jontainer”> <div class=”item item1″>Box1</div> <div class=”item item2″>Box2</div> <div class=”item item3″>Box3</div> <div class=”item item4″>Box4</div> <div class=”item item5″>Box5</div> <div class=”item item6″>Box6</div> </div> Adding a Text Module to the Tab Module: We just use a shortcode in the Tab - this is made possible
by a tiny pice of code in the child theme’s functions.php: //Shortcode to show the module function showmodule_shortcode($moduleid) { extract(shortcode_atts(array(‘id’ =>’*’),$moduleid)); return do_shortcode(‘