An easy-to-use CSS grid system that is based on the grid CSS property and implemented using CSS Custom Properties.
The following is a simple example of the usage of easy-css-grid: https://rogi29.github.io/easy-css-grid
npm install easy-css-grid
Import into your sass using @import '~easy-css-grid'
: root {
-- G rid-width : 100 % ;
-- G rid-gap : 1 em ;
-- G rid-columns : 12 ;
-- G rid-columns-width : 1 fr ;
-- G rid-rows : 1 ;
-- G rid-rows-height : auto ;
-- G rid-rows-min-height : var ( - - G r i d - r o w s - h e i g h t ) ;
-- G rid-rows-max-height : var ( - - G r i d - r o w s - h e i g h t ) ;
-- G rid-column-gap : var ( - - G r i d - g a p ) ;
-- G rid-column-position : auto ;
-- G rid-column-span : 1 ;
-- G rid-row-gap : var ( - - G r i d - g a p ) ;
-- G rid-row-position : auto ;
-- G rid-row-span : 1 ;
}
. Grid {
--width : var ( - - G r i d - w i d t h ) ;
--gap : var ( - - G r i d - g a p ) ;
--columns : var ( - - G r i d - c o l u m n s ) ;
--columns-width : var ( - - G r i d - c o l u m n s - w i d t h ) ;
--columns-template : repeat ( var ( - - c o l u m n s ) , var ( - - c o l u m n s - w i d t h ) ) ;
--rows : var ( - - G r i d - r o w s ) ;
--rows-height : var ( - - G r i d - r o w s - h e i g h t ) ;
--rows-min-height : var ( - - r o w s - h e i g h t , v a r ( - - G r i d - r o w s - m i n - h e i g h t ) ) ;
--rows-max-height : var ( - - r o w s - h e i g h t , v a r ( - - G r i d - r o w s - m a x - h e i g h t ) ) ;
--rows-auto : minmax( var ( - - r o w s - m i n - h e i g h t ) , var ( - - r o w s - m a x - h e i g h t ) ) ;
--rows-template : repeat ( var ( - - r o w s ) , var ( - - r o w s - a u t o ) ) ;
--column-gap : var ( - - g a p , v a r ( - - G r i d - c o l u m n - g a p ) ) ;
--row-gap : var ( - - g a p , v a r ( - - G r i d - r o w - g a p ) ) ;
}
. Grid > . cell {
--column-position : var ( - - G r i d - c o l u m n - p o s i t i o n ) ;
--column-span : var ( - - G r i d - c o l u m n - s p a n ) ;
--column-start : var ( - - c o l u m n - p o s i t i o n ) ;
--column-end : span var ( - - c o l u m n - s p a n ) ;
--row-position : var ( - - G r i d - r o w - p o s i t i o n ) ;
--row-span : var ( - - G r i d - r o w - s p a n ) ;
--row-start : var ( - - r o w - p o s i t i o n ) ;
--row-end : span var ( - - r o w - s p a n ) ;
}
The following represents the code of the example above:
: root {
-- G rid-columns : 3 ;
-- G rid-gap : 10 px ;
-- G rid-width : 1024 px ;
-- G rid-rows-height : 100 px ;
}
. Grid {
margin : 10 px auto ;
}
. Grid . grid-of-four {
--columns : 4 ;
--rows : 4 ;
}
. Grid > . cell {
background : # ddd ;
font-family : Arial , Helvetica , sans-serif ;
text-align : center ;
line-height : 100 px ;
}
. Grid > . cell . two-cols {
--column-span : 2 ;
}
. Grid > . cell . two-rows {
--row-span : 2 ;
}
. Grid > . cell . col-position-first {
--column-position : 1 ;
}
. Grid > . cell . row-position-second {
--row-position : 2 ;
}
< div class = " Grid " >
< div class = " cell " > CELL </ div >
< div class = " cell " > CELL </ div >
< div class = " cell " > CELL </ div >
< div class = " cell " > CELL </ div >
< div class = " cell two-cols col-position-first row-position-second " > CELL </ div >
</ div >
< div class = " Grid grid-of-four " >
< div class = " cell " > CELL </ div >
< div class = " cell " > CELL </ div >
< div class = " cell two-cols two-rows " > CELL </ div >
< div class = " cell " > CELL </ div >
< div class = " cell " > CELL </ div >
</ div >
Code released under the MIT License .