Search code examples
javascriptcsshtmlmaterialize

How can I add more half column in html , for eg 0.5, 1.5 ,2..5

I have created a login form, and I have putted the col value is 

<div class="col l3 offset-l4">

And I want to add 0.5 size more in col, like this

<div class="col l3 offset-l4.5">

How can I do this?

enter image description here

Solution

  • Assuming you use the Materialize Grid system, this is not possible. It offers support only for integer values.

    But you can do a custom implementation. The basic idea of the grid is that you split a row into 12 columns. So a grid value of 4.5 means 4.5 of 12 columns (4.5 / 12) which results in 0.375 or 37.5%. If you want an offset by 4.5 columns, you need to add a left margin of 37.5% to your element.

    So you need to add the following CSS (please note that you are not allowed to use a dot inside a class name):

    .offset-l4-5 {
  margin-left: 37.5%;
}

    But I guess it would be easier to get rid of the grid system and write own CSS for the form.