I finally had a break through with CSS Grid.

I had the new map page laid out with CSS Grid and it was looking great and functioning well on mobile devices too.

However when I went to take it to the next step, integrating the CSS Grid layout with the live page I ran into a snag.

The snag was as soon as I put the <form> tag into the grid to create the input search form, it broke the whole page.

The page went from looking pretty good to what happened.

The page is a complicated CSS Grid with CSS Grids embedded inside other CSS Grids.

I searched and searched and watched several how-to videos on CSS Grid but they all stopped short of making a form with CSS Grid.

They were just basic layout examples with CSS Grid without taking it to the next level of an actual production page.

I had a production page and mine has to work, not just for an stand alone example.

So the break though was I saw that the CSS for a <form> can also have a display option of : “grid”.

This was the break though I was needing.

So if you imagine the form as a Grid Container then all the elements inside the form can be laid out as a CSS grid.

So I had to take it one step at a time, put 1 form element in at a time in the CSS Grid until I had the complete form reconstructed, looking good and not throwing errors.

Yah.  Back on track.

There is still alot of work to do to get the new CSS Grid page back up to the same level of functionality as my original pure Javascript map page. And then transport the new map page to the website.

But we will get there.

Doug Ayers

Mapertunity Lead Developer