Search code examples
cssflexboxmaterial-designmaterialize

Material Design / Materialize 3 column list

I am looking into materialize - http://materializecss.com/

I need to create a list with 3 columns with equal separation but I cannot find any details on the documentation on how to do this.

I just need a basic list:

<ul>
<li>column 1</li> 
<li>column 2</li> 
<li>column 3</li> 
</ul>

So it looks like this:

column 1           column 2           column 3

How can i do this with Materialize or is this not a materialize thing?

Solution

  • You can do it using flex

    ul{
display: flex;
margin: 0;
padding: 0;
}
ul li{
list-style:none;
flex:1;
}
    <ul>
<li>column 1</li> 
<li>column 2</li> 
<li>column 3</li> 
</ul>