CODEWITHSUNDEEP
listcsslayoutgrid
Jokesterfr
Jokesterfr

Reputation: 501

A CSS3 grid list 2x6

I'm looking for some way to display my items list :

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

in a layout, this way:

_________________________
| 1 | 3 | 5 | 7 | 9 | 11| 
_________________________
| 2 | 4 | 6 | 8 | 10| 12|
_________________________

This is for navigation / carousel purpose. As I have like 30 items to display, this template would allow to add 2 items at the beggining and remove 2 items at the end to achieve a move of all items from left to right.

This seems to be a simple layout, however I have no idea how to achived it, not breaking items sibling (of course multiple lists would do the trick, but it's ugly). Many thanks for your support,

Jk.

Upvotes: 0

Views: 485

Answers (2)

bitoffdev
bitoffdev

Reputation: 3384

You could use the css column-count property. Note: The column-count property is not supported in Internet Explorer 9 and earlier versions.

Use this css:

ul{
  -moz-column-count:6; /* Firefox */
  -webkit-column-count:6; /* Safari and Chrome */
  column-count:6;
}

With your HTML:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Upvotes: 1

David Randall
David Randall

Reputation: 770

You can use the column-count CSS property - http://jsfiddle.net/9evfz/ although this isn't supported by older browsers http://caniuse.com/#search=column-count

Upvotes: 1

Related Questions