If the template of your Joomla website is based on Bootstrap (4 or higher) you can use this plugin to easaly use the grid system from Bootstap.
The gridsystem is based on using rows and columns (12 columns per row or element). You can find all the info on https://getbootstrap.com/docs/5.0/layout/grid

To use this plugin you must enable it first. When enable you can add plugin codes to your articles or custom modules.

To start a new row use the code {sc-row}.
To end a row use the code {/sc-row}.

In between rows you can add several colums just by adding {sc-col} at the beginning of the column and {/sc-col} at the end. 
In that case the columns will be created with an equal width inside the row.

You can also set specific with per column by adding parameters to the plugin code. The different paramters are separated 
by a pipe (|) and the parameters and values are separated bij a semicolumn (:).
The examples below should be self explanary.

{sc-row 6} - Creates a column with a width of 6 on all screensizes.
{sc-row 12|md:6} - Creates a column with a width of 12 on all screensizes below the md breakpoint and a width of 6 above.
{sc-row 12|md:6|xl:4} - Creates a column with a width of 12 on all screensizes below the md breakpoint and a width 
of 6 above, but when the breakpoint reaches the xl state, the column is only 4 width.

You can use the default breakpoints from Bootstrap and mix them in the plugin parameters:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)

From version 2.1.0 you can also add extra classes and styling with the following parameters

{sc-col 12|md:6|lg:4|class:mr-3 px-6}
In the example above not only the classes for the bootstrap columns are added. The div-element shall also have the 
classes "mr-3 px-6"

{sc-col 12|md:6|lg:4|class:mr-3 px-6|id:customid;}
And if we add the parameter "id" we can also add a custom id to the element. In this example the result will be
<div id="customid" class="col-12 col-md-6 col-lg-4 mr-3 px-6">