In the past I have done a couple different routes - 1 server side, 1 client side. Both involved calculating the number of items and breaking it into separate unordered lists. The css for doing is is pretty straight forward.
The good news, is that multi-column layout ( http://www.w3.org/TR/css3-multicol/) is getting support ( http://caniuse.com/#search=column-count) and we will hopefully be able to use it soon. The first option in my codepen shows the column-count method (check your browser support though) and the second is just the simple ul's with some styling. It's not production ready, but it should give you a good idea of what would need to be done. http://codepen.io/chrisrockwell/pen/JiGak On Fri, Aug 30, 2013 at 9:16 PM, Chris Rockwell <ch...@chrisrockwell.com>wrote: > Hey John, can you post your HTML? Are you open to adding wrappers or no? > > > On Fri, Aug 30, 2013 at 8:58 PM, John A. Johnson <j...@coffeeonmars.com>wrote: > >> I have a 6-item menu which is inline at desktop sizes, but block at >> mobile sizes. it works great, but at mobile, I'd like to have 2 columns of >> 3 buttons to make better use of my vertical space. is there an easy way to >> do this? can it even be done with css? >> >> thank you! >> >> John >> >> existing desktop css: >> >> nav ul li{ >> display:inline; >> line-height:50px; >> font-size:80%; >> margin:0 3% 0 3%; >> } >> >> >> >> existing mobile css: >> >> nav ul li{ >> background-color:gray; >> border-radius:3px; >> display:block; >> width:97%; >> line-height:45px; >> font-size:100%; >> font-weight:700; >> margin:1% 0 0 0; >> padding:0 0 0 3%; >> } >> ______________________________________________________________________ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > > > > -- > Chris Rockwell > -- Chris Rockwell ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
