# Building a Mobile Responsive Grid Layout in FileMaker Pro **URL:** \ **Category:** Resources\ **Tags:** web-viewer, javascript, executesql\ **Created:** [August 24, 2024, 1:37pm UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239 "2024-08-24T13:37:12Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![greenflux](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/greenflux/32/3171_2.png) [@greenflux](https://the.fmsoup.org/u/greenflux)\ **Post date:** [August 24, 2024, 1:37pm UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/1 "2024-08-24T13:37:12Z")
Hello FileMaker Devs! I just wanted to share a tutorial I wrote on how to build a mobile responsive grid with click events. ![2024-08-24 08.38.31](https://canada1.discourse-cdn.com/flex030/uploads/fmsoup/original/2X/0/07c7b6dd7577f518f0997ce9db1b8b1f130f31e8.gif) > **[Building a Mobile Responsive Grid Layout in FileMaker Pro](https://blog.greenflux.us/building-a-mobile-responsive-grid-layout-in-filemaker-pro?showSharer=true)** > > Web Viewer Trick to Display Records in a Grid, with Click Events! The code should be pretty easy to edit and add your table data to the grid. You can copy the app from GitHub: [github.com/GreenFluxLLC/FileMaker-Experiments/CSS Grid](https://github.com/GreenFluxLLC/FileMaker-Experiments/tree/main/CSS%20Grid) ---
**Author:** ![Malcolm](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/malcolm/32/196_2.png) [@Malcolm](https://the.fmsoup.org/u/Malcolm)\ **Post date:** [August 24, 2024, 11:32pm UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/2 "2024-08-24T23:32:05Z")
That's an excellent tutorial @greenflux. ---
**Author:** ![greenflux](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/greenflux/32/3171_2.png) [@greenflux](https://the.fmsoup.org/u/greenflux)\ **Post date:** [August 25, 2024, 12:58am UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/3 "2024-08-25T00:58:56Z")
Thanks @Malcolm ! I'm really getting back into FileMaker lately after a few years away. I didn't know any JavaScript or frontend development years ago when I was active in FileMaker, and now I'm realizing all the features I wanted to add back then are possible with web viewers. I have a bunch of new content planned, and I'm starting a new series of videos on low-code tools. Here's the first video: [![](https://img.youtube.com/vi/TBmXXJc5OrI/maxresdefault.jpg "Mailing Address Validation & Auto-Complete in FileMaker Pro Using the Radar.com API 📍") ](https://www.youtube.com/watch?v=TBmXXJc5OrI) ---
**Author:** ![Malcolm](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/malcolm/32/196_2.png) [@Malcolm](https://the.fmsoup.org/u/Malcolm)\ **Post date:** [August 25, 2024, 7:17am UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/4 "2024-08-25T07:17:57Z")
Another very nice implementation. I've been doing a variation of that with a recalcitrant client who is adverse to "rule by computer". No matter how many fields I provide, they put the entire address into the first field. So I grab that, throw it at the Nominatum API and see if I can get a valid address. Amazingly, most of the time Nominatum can parse the address, and that is poured into the correct fields. When Nominatum can't figure it out I throw up a window asking them to try again. ---
**Author:** ![weetbicks](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/weetbicks/32/206_2.png) [@weetbicks](https://the.fmsoup.org/u/weetbicks)\ **Post date:** [August 26, 2024, 8:55pm UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/5 "2024-08-26T20:55:10Z")
Very nice! thanks for sharing 👍 ---
**Author:** ![jkoester](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/jkoester/32/2003_2.png) [@jkoester](https://the.fmsoup.org/u/jkoester)\ **Post date:** [August 27, 2024, 6:14am UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/6 "2024-08-27T06:14:36Z")
Great! Thanks a lot for sharing! 🙂 ---
**Author:** ![Drew](https://avatars.discourse-cdn.com/v4/letter/d/b19c9b/32.png) [@Drew](https://the.fmsoup.org/u/Drew)\ **Post date:** [August 27, 2024, 5:56pm UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/7 "2024-08-27T17:56:45Z")
Thank you for sharing this ! ---
**Author:** ![planteg](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/planteg/32/627_2.png) [@planteg](https://the.fmsoup.org/u/planteg)\ **Post date:** [August 27, 2024, 10:04pm UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/8 "2024-08-27T22:04:50Z")
A lot of people questioned the fact that Claris made some room to use JavaScript. This is an example of the power of Java. You need a special control not provided by FileMaker ? Create a small WebViewer and implement it inside then insert that WebViewer inside your Layout ! @greenflux , you proved that FileMaker is still able to create great apps ! ---
**Author:** ![greenflux](https://yyz2.discourse-cdn.com/flex030/user_avatar/the.fmsoup.org/greenflux/32/3171_2.png) [@greenflux](https://the.fmsoup.org/u/greenflux)\ **Post date:** [August 28, 2024, 10:49am UTC](https://the.fmsoup.org/t/building-a-mobile-responsive-grid-layout-in-filemaker-pro/4239/9 "2024-08-28T10:49:06Z")
Thanks everyone! Great to see so much interest in this type of content. I have more on the way!