Skip to content

Instantly share code, notes, and snippets.

@leegee

leegee/two-rows-of-buttons.html

Last active February 27, 2026 23:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save leegee/7e6659c8e53e0b5f4b023f28375254e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save leegee/7e6659c8e53e0b5f4b023f28375254e6 to your computer and use it in GitHub Desktop.
Download ZIP
An indeterminate number of buttons in two rows
Raw
two-rows-of-buttons.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Lee Goddard">
<title>Scrollable Two Rows of Buttons</title>
<style>
body {
background: #004;
color: white;
}
.button-container {
width: 300pt;
overflow-x: auto;
}
.button-container::-webkit-scrollbar {
display: none;
}
.button-wrapper {
display: grid;
/* Two rows for buttons */
grid-template-rows: repeat(2, auto);
/* Fill columns first */
grid-auto-flow: column;
/* Space between buttons */
gap: 5pt;
}
button {
padding: 5pt 10pt;
white-space: nowrap;
background-color: darkorange;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Scrollable Two Rows of Buttons</h2>
<p>
An indeterminate number of buttons of indeterminate size that form two rows in a scrollable element.
</p>
<div class="button-container">
<div class="button-wrapper">
<button>Button 1</button>
<button>This is Button 2</button>
<button>I am Button 3</button>
<button>Button Number 4</button>
<button>It's Button 5</button>
<button>This is Button 6</button>
<button>Button 7</button>
<button>Button Number 8</button>
<button>Button 9</button>
<button>Button 10</button>
<button>And Button 11</button>
<button>The Final Button</button>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment