How To Make A Form With CSS Grid

How To Make A Form With CSS Grid

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

Douglas Ayers

Douglas Ayers

Leave a Reply

Your email address will not be published. Required fields are marked *

About Mapertunity

Welcome to Mapertunity, a new way of posting jobs and finding jobs. We are on a mission to help every single person and every single business find each other, and then put them to work.

Recent Posts

Subscribe to our Blog

We will notify you every time we publish a new blog.

98 views 0 Shares
Share via
Copy link
Powered by Social Snap