<p></p>
<blockquote>
<blockquote>
<p dir="auto">You <em>don't care which rows and columns they occupy</em>. Why would you go and write out those rows and columns if you don't care about them?</p>
</blockquote>
<p dir="auto">We've used <a href="https://getbootstrap.com/docs/5.1/layout/grid/#row-columns" rel="nofollow">https://getbootstrap.com/docs/5.1/layout/grid/#row-columns</a> elsewhere on the site, which allows us to avoid being explicit, and also set different numbers of columns for different screen sizes.</p>
</blockquote>
<p dir="auto">But that way you still specify the number (and contents) of columns. But why would you care about the number of columns for layer buttons? Why not saying "however many columns possible as long as they are equal width and wider than this size"? That's what you can specify with one css property.</p>
<blockquote>
<blockquote>
<p dir="auto">Is <em>not being based on screen size but being based on a container size</em> a compelling reason?</p>
</blockquote>
<p dir="auto">It's a nice reason, but on its own isn't compelling - partly because the container size is based on screen size in this case.</p>
</blockquote>
<p dir="auto">And then you'll have this weird condition to check where on small screens the container is narrow, on wider screens it's wider and on yet wider screens it's narrow again.</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1195599406">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLNHJDUUDHJGEQCQ4JLVV74UPANCNFSM54SY7APA">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLNHM7LV2SWUDUYUKADVV74UPA5CNFSM54SY7APKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOI5BWMLQ.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/3620/c1195599406</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1195599406",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3620#issuecomment-1195599406",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>