How to Make Automatic.css Grid Classes Compatible in Bricks Builder

<?php

/**
 *  If you use are tired of waiting for grid layout to be added to Bricks and are also a user of Automatic∙css,
 *  you may have tried to use a grid utility class with Bricks and found out that while it works fine on the front end, 
 *  grids aren't shown properly in the builder. Here's the CSS needed to make the grid classes display properly in the builder. 
 * 
 *  Add to the footer on the frontend (which will also affect the builder).
 */
 
add_action('wp_footer', function(){
   
   $css = <<<EOD
   <style type="text/css">
   
        [class*=grid--], [class*=grid--] > .bricks-container-inner {
            display: grid!important;
            grid-template-columns: var(--grid-template-columns);
            grid-gap: var(--grid-gap);
        }
        .grid--2 .bricks-container-inner {
            --grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .grid--3 .bricks-container-inner {
            --grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        .grid--4 .bricks-container-inner {
            --grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        [class*=grid--].editing, [class*=grid--].bricks-draggable {
            display: flex !important;
        }
    </style>
EOD;

echo $css;
});