I am facing an issue while trying to create a row with 4 cells and I can't figure out why it's not working.
The structure involves a parent element called row with 4 child elements.
<div className='row'>
<div className='col-1-of-4'>
hello
</div>
<div className='col-1-of-4'>
hello
</div>
<div className='col-1-of-4'>
hello
</div>
<div className='col-1-of-4'>
hello
</div>
</div>
(Please disregard the className attribute, as this code is written in React)
The CSS properties used are:
[class^="col-"] {
float: left;
&:not(:last-child) {
margin-right: $gutter-horizontal;
}
}
.col-1-of-4 {
width: calc((100% - #{$gutter-horizontal}) / 4);
}
The calculation should result in 4 cells appearing in a row. However, I am experiencing an issue where only 3 cells appear in a row and the fourth one gets pushed down to the next line.
The expected output:
hello hello hello helloThe actual output:
hello hello hello
helloYou can view the corrected code on this link: https://codepen.io/sarmad1995/pen/REYXBV?editors=1100