Introduction to Layout

This chapter marks the start of our discussion of controlling layout.

<aside> <img src="/icons/list_purple.svg" alt="/icons/list_purple.svg" width="40px" />

Learning objectives

By the end of this chapter you will:

• understand the principles of layout
• be able to distribute content in columns
• have a working understanding of CSS 'flexbox' layout
• be able to align and stretch elements along their main and cross axes. </aside>

What is layout?

Up until now, our content has been very one-dimensional down the page. Each block element we added appeared beneath the previous one.

In web development and design, "layout" refers to the arrangement of elements on a web page. It encompasses the way content is structured and presented to users, including text, images, buttons, and other content and interactive elements. A well-designed layout ensures that information is structured in a scannable way (and therefore easy to find) and aesthetically pleasing (in terms of balance), improving the user's experience and interaction with the website.

Layout design involves several key considerations:

1. Structure: The framework that organises content into sections or divisions. This can be achieved using HTML elements like <div>, and semantic elements like header, footer, nav, <section>, <article>, and <aside>. (We'll talk about semantic elements in the next chapter.)
2. Visual Hierarchy: The arrangement of elements in a way that implies importance, guiding the user's attention to the most critical parts first. Size, colour, and placement all affect visual hierarchy.
3. Responsiveness: (A topic for our future.) The ability of a layout to adapt to various screen sizes and orientations, ensuring a consistent user experience across different devices. This is typically achieved using responsive design techniques, including flexible grid layouts and CSS media queries.
4. Navigation: How users move through a website, including the design of menus, links, and buttons. A clear and intuitive navigation structure is paramount for good usability.
5. Whitespace: Also known as negative space, whitespace is the area around and between elements. Proper use of whitespace can help reduce clutter, improve readability, and create a more refined/considered/elegant design.
6. Alignment and Balance: The placement of elements in a way that creates a cohesive and aesthetically pleasing arrangement. This includes balancing different parts of the content to create a harmonious overall design arrangement.

We won't cover all of these ideas today, but these themes will re-emerge in subsequent chapters as we learn of several ways that different layout approaches‡ can be described in CSS. CSS plays the fundamental role in implementing web layouts, and affords us a wide range of approaches to control the positioning, spacing, and sizing of elements.

<aside> <img src="/icons/light-bulb_blue.svg" alt="/icons/light-bulb_blue.svg" width="40px" />

Layout in Modern CSS

‡ Learning how to "lay content out" with CSS will help us better embrace our screen real-estate. While there are a range of ways to move content around a screen, Flexbox and Grid are two modern CSS layout models that provide detailed control over complex layouts, and make it easy to create responsive and adaptive designs.

</aside>

Layout Patterns