DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Responsive Grid Layouts for Browser Extension New Tab Pages

#css #firefox #webdev #browserextensions

Responsive Grid Layouts for Browser Extension New Tab Pages

When building the Weather & Clock Dashboard Firefox extension, one of the tricky challenges was making the layout work well across different monitor sizes and resolutions.

Browser extension new tab pages have a unique constraint: you cannot control the viewport size. Users might have a 1080p monitor, a 4K display, or a small laptop screen.

The Base Grid

I use CSS Grid for the main layout:

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

auto-fit with minmax gives you:

  • 1 column on narrow viewports (< 560px)
  • 2 columns on medium screens
  • 3+ columns on wide screens

All without a single media query.

Cards That Scale 

.card {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 20px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
}

/* Weather card takes full width on small screens */
@media (min-width: 768px) {
  .weather-card {
    grid-column: span 2;
  }
}
Enter fullscreen mode Exit fullscreen mode

World Clocks: Auto-Wrapping Row

For the world clocks section specifically:

.clocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}
Enter fullscreen mode Exit fullscreen mode

auto-fill (vs auto-fit) keeps empty columns at minimum width, which is useful when you have a fixed number of clocks and want them to stay left-aligned rather than stretching.

Centering the Whole Page

For a new tab page, you want the content centered both horizontally and vertically:

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
}

.dashboard {
  width: 100%;
  max-width: 1200px;
}
Enter fullscreen mode Exit fullscreen mode

min-height: 100vh with flex centering ensures the content is centered even if the page is taller than the viewport (which can happen on very small screens).

The Font Size Issue

Big clock digits need to scale with the card width, not the viewport:

.clock-time {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}
Enter fullscreen mode Exit fullscreen mode

clamp(min, preferred, max) sets bounds on the scaling:

  • Never smaller than 1.5rem
  • Scales with viewport width (4vw)
  • Never larger than 3rem

Testing Across Resolutions

The easiest way to test your new tab page across resolutions is to use Firefox's Responsive Design Mode (Ctrl+Shift+M in DevTools). Test at:

  • 1280x720 (13" laptop)
  • 1920x1080 (standard desktop)
  • 2560x1440 (27" display)
  • 3840x2160 (4K)

The Weather & Clock Dashboard source uses all these techniques.

Top comments (0)