Easy to use Grid system base on flex display property.
You can import Grix inside your <head> </head> tag and you are good to go!
<link rel="stylesheet" href="./dist/style/grix.min.css">The following syntax can create 4 columns (each width 25% ) in one row.
<div class="gx-row gx-cols-4 gx-colml-4">
<div>
25% width
</div>
<div>
25% width
</div>
<div>
25% width
</div>
<div class="">
25% width
</div>
</div>-
Small Screen (for screen < 768px) =>
gx-cols-* -
Medimun Screen and Large Screen (for screen > 768px) =>
gx-colml-* -
Medimun Screen (for screen > 768px and screen < 992px) =>
gx-colm-* -
Large Screen (for screen > 992px) =>
gx-coll-*
here are some sample code.
<div class="gx-vert gx-fh">
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
<div class="vh-1">
height 11.11%
</div>
</div>if you want to see more detail, please see my Demo Page or download index.html file.
Thanks and enjoy!