Mega menu demo

Switch layouts:

Number items:

nav { 
  display: block;
  columns: 30ch; 
  column-gap: 4ch;
}

nav { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
  column-gap: 1rem;
  justify-content: center; 
}

nav { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24ch, 1fr));
  grid-template-rows: masonry;
  column-gap: 2lh;
  justify-content: center; 
}

nav { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  grid-template-rows: masonry;
  column-gap: 4lh;
  justify-content: center; 
}