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.
But we will get there.
Mapertunity Lead Developer