diff options
| -rw-r--r-- | stylesheets/commun.css | 19 |
1 files changed, 15 insertions, 4 deletions
diff --git a/stylesheets/commun.css b/stylesheets/commun.css index c0cbd63..6fe4dfb 100644 --- a/stylesheets/commun.css +++ b/stylesheets/commun.css @@ -140,16 +140,27 @@ footer.legal { } nav > ol { - display: flex; + display: grid; align-items: center; align-content: stretch; - flex-wrap: wrap; text-align: center; margin: 0; } - nav > ol > li { - flex: 1; + /* I'd like to make sure the grid only ever has 1/2/4 columns. + * No idea how to do that with one single neat rule, so… + * 🤖 Go Go Gadget Mediaquery 🤖 */ + + @media (min-width: 50em) { + nav > ol { + grid-template-columns: repeat(2, minmax(8em, 1fr)); + } + } + + @media (min-width: 90em) { + nav > ol { + grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); + } } nav li.dropdown { |