Easy maintenance
With SpeedGrid, CSS Flexbox and CSS Grid layout can be changed without editing CSS, making maintenance and prototyping easier.
Super-Lightweight
SpeedGrid is just 3KB, so it will not adversely affect the display speed of the page.
Rapid layout experience
You can build CSS Flexbox and CSS Grid layout as you wish just by writing the class name. This method will save you a lot of time compared to the usual method of writing CSS one by one.
Usage
Flexbox
index.html
<div class=“flex-xxx-yyy”></div>
Give a class to the container of Flexbox. The class name consists of the following elements.
1, flex-
2, xxx that specify justify-content.
3, yyy that specify align-items.
xxx and yyy correspond to the following strings.
xxx
yyy
strings
generated CSS
strings
generated CSS
left-
justify-content:flex-start;
center-
justify-content:center;
right-
justify-content:flex-end;
between-
justify-content:space-between;
around-
justify-content:space-around;
evenly-
justify-content:space-evenly;
-top
align-items:flex-start;
-middle
align-items:center;
-bottom
align-items:flex-end;
※It is possible to specify only one of flex- or flex-xxx or flex-yyy.
Samples
Grid
index.html
<div class=“grid-x-a/b grid-y-c/d”></div>
Elements can be easily placed by specifying the grid area of child elements. Grid areas are specified by the x and y axes, where grid-x- denotes the horizontal direction and grid-y- denotes the vertical direction. Grid-start and grid-end are specified with a slash, just as you would specify a grid area with a shorthand in normal notation. Whitespace before and after the slash is not required. You can set the grid track as you like. Gridlines must be less than 10.
Samples
gap()
index.html
<div class=“gap-nn”></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.
Simple Usage
gap-nn (nn=number)