Better responsive nav layout

3 files changed, 43 insertions, 6 deletions

diff --git a/public/css/modules/nav.css b/public/css/modules/nav.css
index cea8aa6..f2e2c45 100644
--- a/public/css/modules/nav.css
+++ b/public/css/modules/nav.css
@@ -7,12 +7,34 @@
   flex-direction: column;
 }
 
+.nav__nav-links {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  column-gap: var(--grid-gutter-width);
+}
+
 .nav__nav-links li {
-  width: max-content;
+  margin: 0;
 }
 
-.nav__nav-links li:not(:last-of-type) {
-  margin-block-end: var(--margin-block-sm);
+.nav__nav-links li:nth-child(1) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(2) {
+  grid-column: 3 / 5;
+}
+
+.nav__nav-links li:nth-child(3) {
+  grid-column: 1 / 4;
+}
+
+.nav__nav-links li:nth-child(4) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(5) {
+  grid-column: 3 / 5;
 }
 
 .nav__logo {
diff --git a/public/css/modules/nav.lg.css b/public/css/modules/nav.lg.css
index 234bbd8..c47a685 100644
--- a/public/css/modules/nav.lg.css
+++ b/public/css/modules/nav.lg.css
@@ -5,3 +5,11 @@
   padding-inline: max(10%, calc((100% - var(--max-width-all-content)) / 2));
   gap: var(--spacing-inline-xs);
 }
+
+.nav__nav-links li:nth-child(4) {
+  grid-column: 8 / 10;
+}
+
+.nav__nav-links li:nth-child(5) {
+  grid-column: 10 / 12;
+}
diff --git a/public/css/modules/nav.md.css b/public/css/modules/nav.md.css
index f771a0f..c3f4a18 100644
--- a/public/css/modules/nav.md.css
+++ b/public/css/modules/nav.md.css
@@ -1,4 +1,11 @@
-.nav__nav-links {
-  display: flex;
-  gap: var(--margin-inline-md);
+.nav__nav-links li:nth-child(3) {
+  grid-column: 5 / 8;
+}
+
+.nav__nav-links li:nth-child(4) {
+  grid-column: 1 / 3;
+}
+
+.nav__nav-links li:nth-child(5) {
+  grid-column: 3 / 5;
 }
\ No newline at end of file