micro-library for CSS Flexbox and CSS Grid

more details --> https://toshihidemiyake.github.io/SpeedGrid/

SpeedGrid dynamically generates inline CSS by specifying the class name.

Describe the class name in the container.
Class names should be created by combining flex, xxx, and yyy.
Each of them have to be connected with -.

・flex--corresponds to display:flex;.
・xxx --corresponds to justify-content.
・yyy--corresponds to align-items.

<div class="flex-center-middle" style="display: flex; justify-content: center; align-items: center;"></div>

※It is also possible to specify only one of flex or flex-xxx or flex-yyy.

Describe the grid area with grid lines of the X and Y axes, as the class name in child elements. Grid-start and grid-end are specified with a slash. Whitespace before and after the slash is not required. You have to do the work of setting up the display:grid; and grid tracks for the container by yourself. Gridlines must be less than 10.

<div class="grid-x-2/4 grid-y-3/4" style="grid-area: 2 / 3 / 4 / 4;"></div>

You can specify the gap property for Flexbox and Grid. The easiest way to use this is to simply specify gap-nn (nn=number) in the class name. You can also specify each gap for the horizontal and vertical axes by using the prefix gapx-,gapy-. You can use px, %, or em as the unit. px is used by default, but you can specify the unit by adding per or em between gap- and -nn.

gap-nn (nn=number)