SpeedGrid

micro-library for CSS Flexbox and CSS Grid

Overview

SpeedGrid dynamically generates inline CSS by specifying the class name.

Easy maintenance --CSS Flexbox and CSS Grid layout can be changed without editing CSS.

Super-Lightweight--SpeedGrid is just 4KB.(minified one is 3KB)

Rapid layout experience--You can use the Flexbox&Grid system intuitively.

Usage

Flexbox

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.

XXX		YYY
strings	CSS	strings	CSS
left-	justify-content:flex-start;	-top	align-items:flex-start;
center-	justify-content:center;	-middle	align-items:center;
right-	justify-content:flex-end;	-bottom	align-items:flex-end;
between-	justify-content:space-between;
around-	justify-content:space-around;
evenly-	justify-content:space-evenly;

If you write the class name in the container like

, the actual output will look like this:

<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.

Grid

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.

If you write the class name in the child elements like

, the actual output will look like this:

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

gap

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.