Web Page Layout Ideas: Common Patterns and How to Build Them

The Main Content

The maximum space of the website should be covered with well-structured content. Although this part of website holds the maximum transitions but the main content is preferably static. Content can be put up through divisions of the layout into one column or two or maybe three. It is in the hands of the designer to add a spin to this section depending on the website and client requirement.

The column counts below describe the shape of a layout, not the code that builds it. CSS Grid produces all three shapes from a single rule, because grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) creates as many columns as the available space allows and drops to one column when it runs out. Container queries go further and let a card or a sidebar react to the width of the element that holds it rather than the width of the browser window, which matters when you reuse the same component in a wide main column and a narrow rail.

Name the regions in the markup before you position them in CSS. MDN sets out the semantic elements for this: header for the introductory content, nav for the main navigation, main for the content unique to that page, aside for side content that is only indirectly related, and footer for the end content. Use main once per page, directly inside body. Grid and Flexbox then decide where those regions sit, while the elements themselves tell a screen reader what each region is.

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

1-column layout

This kind of layout is the default starting point for mobile-first design. This is one of the easiest layouts as not only does it provide smooth navigation to users but also fits mobile screen perfectly. This kind of layout is best suitable for personal blogs and microblogs like Tumblr. The addition of 'sticky' for this layout allows comfortable scrolling through pages, making the visitor avoid scrolling way back up to navigate.

2-column layout

Often termed as the split-screen layouts, it is most preferable for medium sized screens like laptops and tablets. A website tends to offer such designs if information to be presented holds equal weightage . Split-screen is a mainstream pattern rather than one to avoid, and adding animation or a strong colour contrast on one side makes the outcome more engaging. On a narrow screen the two halves should stack into a single column.

The 2-column layout can have an upgraded version with asymmetric column which helps the user to differentiate between useful and less useful content. The asymmetric view uplifts better segregation behaviour by focusing user's attention on the informative objects. The use of high colour contrast can add weightage to this version.

3-column layout

The only suitable layout for big screens like desktop comes through this section. The entire focus lies on the central part of this layout. Because content is all that you survive on! The unequal arrangement in this column earns the website a quick glance as well as makes the navigation rapid.

Though we had a brief insight of the most common transformations which can be done with this version, but the real magic begins when we mix match them and come up with brewing layouts.

Fixed Sidebars

Along with the top-side horizontal navigation, it is also possible to provide assistance of menus by keeping them static in the side bars of the web page. If the website holds limited navigation options this layout supports the designer. It is a preferable look for a majority of websites as it gives the user an overview of the entire website in a single glance.

Footer

While you are underestimating the importance of footers, it is saving the day all around the internet. Before the visitor hits the bottom of the web page, it catches the visitor like those safety nets. Footer is nothing but choosing how to conclude, with a purpose of helping visitors and meeting the business goals.

This layout is visible at the bottom of every page of the web site. Likeheader, this section generally covers the often ignored yet global information like copyrights, contact details, office locations.

With the growing twists to each section, this static footer can be transformed to dynamic by upgrading it with easy-to-navigate feature to other sections of the web page. How much can you make the visitor scroll down depends on how well you summarize your footer.

How Do AI Coding Tools Change Web Page Layout Work?

AI tools now write the layout code, so the job shifts from placing the boxes to reviewing what the generator produced. Reading order is the first thing to check. Figma Make turns a text prompt into code-backed prototypes that stay editable on the canvas, and Vercel's v0 describes itself as an AI agent that helps anyone create real code and full-stack apps. Both will hand you a finished grid or flex container from one sentence of English. Neither output tells you the order a screen reader and the keyboard will travel through the columns.

CSS Grid and Flexbox decide where an item appears, not when it is read. The flexbox specification is explicit about this: authors must not use order, or the -reverse values of flex-flow and flex-direction, as a substitute for correct source ordering, because it can ruin the accessibility of the document. As MDN puts it, the tabbing order and speech order follow the order of the source code, so a visually reordered navigation bar still tabs in DOM order.

That becomes a standards failure the moment the sequence carries meaning. WCAG Success Criterion 1.3.2 Meaningful Sequence is a Level A requirement: when the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. A generated three-column page that shows the main story first but places the sidebar first in the markup breaks that rule.

CSS has a direct answer in the reading-flow property, whose flex-visual, grid-rows and grid-columns values make focus and speech order follow the visual order of a flex or grid container. MDN still lists it as limited availability rather than Baseline, so correct source order remains the safe default. Tab through any generated layout with the keyboard before you keep it.

Key Takeaway: AI tools generate layout code from a prompt but not a correct reading order, so check a generated page against WCAG Success Criterion 1.3.2 Meaningful Sequence and tab through it with the keyboard before keeping it.