Since version 1.5 has not yet brought the css grid layout feature, here is the custom css grid code I used in version 1.4. Share it with everyone.
/* CSS GRID */
.cols-2 {grid-template-columns:repeat(2,minmax(0,1fr));display:grid !important;width:100%;}
.cols-3 {grid-template-columns:repeat(3,minmax(0,1fr));display:grid !important;width:100%;}
.cols-4 {grid-template-columns:repeat(4,minmax(0,1fr));display:grid !important;width:100%;}
.cols-5 {grid-template-columns:repeat(5,minmax(0,1fr));display:grid !important;width:100%;}
.cols-6 {grid-template-columns:repeat(6,minmax(0,1fr));display:grid !important;width:100%;}
.cols-7 {grid-template-columns:repeat(7,minmax(0,1fr));display:grid !important;width:100%;}
.cols-8 {grid-template-columns:repeat(8,minmax(0,1fr));display:grid !important;width:100%;}
.cols-9 {grid-template-columns:repeat(9,minmax(0,1fr));display:grid !important;width:100%;}
.cols-10 {grid-template-columns:repeat(10,minmax(0,1fr));display:grid !important;width:100%;}
.cols-11 {grid-template-columns:repeat(11,minmax(0,1fr));display:grid !important;width:100%;}
.cols-12 {grid-template-columns:repeat(12,minmax(0,1fr));display:grid !important;width:100%;}
.col-1 {grid-column:span 1 / span 1;}
.col-2 {grid-column:span 2 / span 2;}
.col-3 {grid-column:span 3 / span 3;}
.col-4 {grid-column:span 4 / span 4;}
.col-5 {grid-column:span 5 / span 5;}
.col-6 {grid-column:span 6 / span 6;}
.col-7 {grid-column:span 7 / span 7;}
.col-8 {grid-column:span 8 / span 8;}
.col-9 {grid-column:span 9 / span 9;}
.col-10 {grid-column:span 10 / span 10;}
.col-11 {grid-column:span 11 / span 11;}
.col-12 {grid-column:span 12 / span 12;}
@media screen and (max-width:990px) {
.lg-cols-1 {grid-template-columns:repeat(1,minmax(0,1fr));display:grid !important;width:100%;}
.lg-cols-2 {grid-template-columns:repeat(2,minmax(0,1fr));display:grid !important;width:100%;}
.lg-cols-3 {grid-template-columns:repeat(3,minmax(0,1fr));display:grid !important;width:100%;}
.lg-cols-4 {grid-template-columns:repeat(4,minmax(0,1fr));display:grid !important;width:100%;}
.lg-cols-5 {grid-template-columns:repeat(5,minmax(0,1fr));display:grid !important;width:100%;}
.lg-cols-6 {grid-template-columns:repeat(6,minmax(0,1fr));display:grid !important;width:100%;}
.lg-col-1 {grid-column:span 1 / span 1;}
.lg-col-2 {grid-column:span 2 / span 2;}
.lg-col-3 {grid-column:span 3 / span 3;}
.lg-col-4 {grid-column:span 4 / span 4;}
.lg-col-5 {grid-column:span 5 / span 5;}
.lg-col-6 {grid-column:span 6 / span 6;}
}
@media screen and (max-width:766px) {
.md-cols-1 {grid-template-columns:repeat(1,minmax(0,1fr));display:grid !important;width:100%;}
.md-cols-2 {grid-template-columns:repeat(2,minmax(0,1fr));display:grid !important;width:100%;}
.md-cols-3 {grid-template-columns:repeat(3,minmax(0,1fr));display:grid !important;width:100%;}
.md-cols-4 {grid-template-columns:repeat(4,minmax(0,1fr));display:grid !important;width:100%;}
.md-col-1 {grid-column:span 1 / span 1;}
.md-col-2 {grid-column:span 2 / span 2;}
.md-col-3 {grid-column:span 3 / span 3;}
.md-col-4 {grid-column:span 4 / span 4;}
}
@media screen and (max-width:477px) {
.sm-cols-1 {grid-template-columns:repeat(1,minmax(0,1fr));display:grid !important;width:100%;}
.sm-cols-2 {grid-template-columns:repeat(2,minmax(0,1fr));display:grid !important;width:100%;}
.sm-cols-3 {grid-template-columns:repeat(3,minmax(0,1fr));display:grid !important;width:100%;}
.sm-col-1 {grid-column:span 1 / span 1;}
.sm-col-2 {grid-column:span 2 / span 2;}
.sm-col-3 {grid-column:span 3 / span 3;}
}
.gap-1 {gap:10px}
.gap-2 {gap:20px;}
.gap-3 {gap:30px;}
.gap-4 {gap:40px;}
.row-1 {grid-row:span 1 / span 1;}
.row-2 {grid-row:span 2 / span 2;}
.row-3 {grid-row:span 3 / span 3;}
.col-st {align-items:stretch;}
.row-ct {justify-self: center;}
