Designing a Responsive CSS Grid for Dual-Calendar (Hijri/Gregorian) Input Forms

HTML & CSS
1

Hi everyone,

I’m currently refactoring the front-end layout for a localized web utility project that requires users to switch seamlessly between the Gregorian and Hijri calendar systems.

Because Arabic is a right-to-left (RTL) language, I am trying to build a fluid, mobile-first CSS Grid container that automatically mirrors the input field sequence (Day / Month / Year) based on the dir=“rtl” attribute without causing layout shifts or field wrapping on smaller viewports.

I’ve been studying the layout structure over at agecalculatorsa.com because their form inputs handle the responsive grid stacking perfectly on mobile screens without bloating the CSS. However, I am having trouble getting my grid-template-columns to scale proportionally when transitioning from a three-column desktop row to a stacked mobile block while maintaining aligned form labels.

If you are building localized form components for right-to-left languages, do you prefer using CSS Flexbox with auto-margins for form control alignment, or is it better to rely strictly on CSS Grid areas to prevent layout breaking?

Would love to get some advice on clean layout architecture patterns for this use case. Thanks!

3

For form modules that require a dynamic direction flip (dir="rtl"), relying strictly on CSS Grid combined with standard logical properties is almost always cleaner than fighting with Flexbox auto-margins.

The wrapping and scaling issue you are experiencing during the viewport transition usually happens when you try to force explicit column widths on the inputs while the form labels are sharing the same track footprint. To prevent field wrapping on smaller viewports, you should let the browser handle the layout changes automatically using grid-template-columns: repeat(auto-fit, minmax(0, 1fr)). This forces the Day/Month/Year selectors to scale down completely flat and identical on desktop screens, regardless of the text direction rule.

For the mobile block stacking, instead of standard pixel media queries, you can cleanly handle the responsive transition like this:

CSS

.form-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .form-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

To keep your form labels perfectly aligned above their respective inputs without breaking the layout during an RTL shift, make sure you use CSS logical properties like text-align: start instead of text-align: right. This ensures that when the parent container switches calendar languages, the label automatically moves to the correct side of the text track natively.

Flexbox is great for the top toggle switch component where you select between the Hijri and Gregorian systems, but for the actual numeric input grid, CSS Grid gives you much tighter control over layout shifts.