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
.
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
<div class="flex-center-middle"></div>
, 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
.
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
<div class="grid-x-2/4 grid-y-3/4"></div>
, 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>
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)
more details --> https://toshihidemiyake.github.io/SpeedGrid/
support -->Buy me a coffee