Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li><button>1</button></li>
  <li><button>2</button></li>
  <li><button>3</button></li>
  <li><button>4</button></li>
  <li><button>5</button></li>
  <li><button>6</button></li>
  <li><button>7</button></li>
  <li><button>8</button></li>
  <li><button>9</button></li>
  <li><button>10</button></li>
  <li><button>11</button></li>
  <li><button>12</button></li>
  <li><button>13</button></li>
  <li><button>14</button></li>
  <li><button>15</button></li>
  <li><button>16</button></li>
  <li><button>17</button></li>
  <li><button>18</button></li>
  <li><button>19</button></li>
  <li><button>20</button></li>
</ul>
</body>
</html>
 
  ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  font-size: 20px;
  border: none;
  display: block;
  background: goldenrod;
  color: white;
  width: 90%;
  height: 30px;  
  margin: 5%;
  transform: scale(0.8);
  transition: 300ms;
}
button:hover, button:focus {
  transform: scale(1);
  outline: none;
  background: powderblue;
  color: #333;
}
​
li {
  float: left;
}
​
/* 
  grid magic by @heydonworks 
  https://codepen.io/heydon/pen/bcdrl
*/
​
li {
  width: calc(100% / 4);
}
li:nth-child(4n+1):nth-last-child(1) {
  width: 100%;
}
li:nth-child(4n+1):nth-last-child(1) ~ li {
  width: 100%;
}
li:nth-child(4n+1):nth-last-child(2) {
  width: 50%;
}
li:nth-child(4n+1):nth-last-child(2) ~ li {
  width: 50%;
}
li:nth-child(4n+1):nth-last-child(3) {
  width: calc(100% / 4);
}
li:nth-child(4n+1):nth-last-child(3) ~ li {
  width: calc(100% / 4);
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
codepo8pro
0viewers