Home › Forums › CSS › [Solved] Alternating column widths at set intervals › Reply To: [Solved] Alternating column widths at set intervals
May 26, 2015 at 1:13 am
#202814
grimski
Participant
Doh! I think it was just the prefixes, for some reason I thought Chrome would still pick up the column-width
and column-gap
rules without them.
As I’m on a 27″ iMac, I’ve realised I’ll need a lot of items to fill the screen or I’ll need to change the height/width of each <li>
so they’re taller. Otherwise The amount of list-items will fit into 2 or 3 columns on the screen due to the browser height!
Thanks again for all your help. I saved your original CSS if it helps (width browser prefixes):
ul {
list-style: none;
padding: 0;
}
li {
background: rgba(255, 0, 0, .40);
padding: 0.5% 0;
height: 14.4%;
display: inline-block;
margin: 0.4% 0.4% 0.4% 0!important;
}
ul {
counter-reset: ulli;
-webkit-column-width: 350px;
-webkit-column-gap: 1px;
-moz-column-width: 350px;
-moz-column-gap: 1px;
column-width: 350px;
column-gap: 1px;
}
html,
body,
ul {
height: 100%;
margin: 0;
}
li:before {
counter-increment: ulli;
content: counter(ulli);
}
li:nth-child(1n) {
width: 48.75%;
background: lightgray;
}
li:nth-child(7n+1) {
width: 99%;
background: #00f;
}