Unable to set row/column space in grid
Posted: Tue Aug 02, 2022 8:08 am
Hi There,
I would like to add space between rows, so I tried with css possibilities such as 'border-spacing' and 'row-gap'. Still, I'm unable to achieve the result.
Please find the below css code and let me know if anything I have missed or how can we achieve to add space between rows?
.mobile-grid {
position: absolute;
border-collapse: separate;
border: 0px;
background: #dcedf9;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
table-layout: fixed;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.mobile-grid .cell.even,
.mobile-grid .cell.odd {
background: #FFFFFF;/* Border/Dark3 */
border: 1px solid #D7E2ED;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.05);
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 5px !important;
}
Thanks in Advance!
Muthu
I would like to add space between rows, so I tried with css possibilities such as 'border-spacing' and 'row-gap'. Still, I'm unable to achieve the result.
Please find the below css code and let me know if anything I have missed or how can we achieve to add space between rows?
.mobile-grid {
position: absolute;
border-collapse: separate;
border: 0px;
background: #dcedf9;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
table-layout: fixed;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.mobile-grid .cell.even,
.mobile-grid .cell.odd {
background: #FFFFFF;/* Border/Dark3 */
border: 1px solid #D7E2ED;
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.05);
border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 5px !important;
}
Thanks in Advance!
Muthu