I Hate GridLayout!

I’m absolutely delighted by almost everything that Visual Studio .NET has to offer. There are a few things I don’t like, and the feature that I hate most is GridLayout.

GridLayout makes it possible to design a web form using CSS absolute positioning, as opposed to FlowLayout which forces the use of traditional layout techniques like HTML tables. When adding a new web form to an ASP.NET project, Visual Studio .NET defaults to using GridLayout. I immediately change this on any non-trivial web forms I create…I can’t stand GridLayout!

I can understand the motivation behind the GridLayout feature. It lets developers who are more experienced with Win32 application development start writing web applications without having to ramp up on more declaritive style layout. It’s very much in keeping with the (sometimes leaky ;)) server side UI events abstraction that allows us to code web form applications in the same style as traditional Win32 appplications. In fact, I’ve spoken with lots of developers who run into issues because they forget that their is in fact a difference between the code that runs in the browser and the code that runs on the server. I guess that means the abstraction is effective!

GridLayout also makes it a snap to whip up quick demos without having to write any layout code. That said, the title of this post is “I Hate GridLayout!”, and not “GridLayout Love!”, so let’s get to my issues with it.I have three big problems with GridLayout.

The first is the fact that it often results in pages where the structure of the declaritive syntax in the ASPX template doesn’t map to the structure that the user sees visually. Absolute positioning means that the first control viewed on the page may in fact be the 15th of 20 controls in the ASPX code. On a page with only a few controls, that’s not a huge deal. I’m working on a page right now that has 40+ controls, and it’s a real headache. It’s basically impossible to do what experienced web developers often do, and that’ to mentally render the code as we’re reading through it. In a lot of cases, GridLayout means that dragging and dropping is the only real way to modify a page. Now, there’s no real reason why the structure of the template document can’t be updated manually to ensure that it matches the conceptual structure, but I’ve yet to see a GridLayout page where that’s been done. Using FlowLayout almost forces that to be the case.

My second problem with GridLayout is a non-technical one based completely on my own experiences. I would guess that most web developers who aren’t primarily UI designers have a much better understanding of traditional table layout than CSS absolute positioning. That’s certainly the case for me. I can design a page using table layout with minimal effort, but doing anything complex with absolute positioning makes me whip out the deep thinking cap. It’s also much easier (IMHO) to move groups of controls around by quickly changing table structure rather than having to do form designer jiu jitsu with your mouse.

The last gripe I have with GridLayout is re-usability. With a FlowLayout page, a developer can copy and paste the declaritive code into a new page or web user control with almost no fuss. In a lot of cases, no fuss at all. With GridLayout code, you’re going to have to manually update the position of every control, or in many cases just re-do the layout from scratch. I’ve tried converting a page from GridLayout to FlowLayout by setting the original page’s targetSchema property to “Internet Explorer 3.02 / Netscape Navigator 3.0”, but the results are….shall we say, unattractive. You get tables, but like most WYSIWYG HTML generators you don’t want to open up the sandwich and look at what’s inside.

I’m sure there are tips and tricks for minimizing the impact of the issues I’ve raised. I’m also aware that CSS absolute positioning is a great tool for pure web developers and other people who are designing layout for use across many pages in a web site. That said, I think the disadvantages far outweight the advantages for those of us creating a unique layout for a single form in a line of business or similar application. GridLayout may save you some dev time up front, but you’ll pay for it when you need to re-use the code or make major layout changes.

The information in this post is provided “AS IS” with no warranties, and confers no rights.

This post does not represent the thoughts, intentions, plans or strategies of my employer. It is solely my opinion. It may in fact be totally wrong ;).