In this tutorial, we'll cover one of the most common basic content layouts for popular websites.

The alternating image & text content pattern covered here can be seen across a wide variety of very successful websites. This means it's a proven pattern and there's no need to reinvent the wheel.

We'll cover how to create this basic pattern in Oxygen using CSS grid instead of columns, and how to adapt it for smaller screen sizes.

Next, we'll take a quick look at how to make a slightly more interesting content layout, where images on the left side of the section stick to the top of the viewport as you scroll down. Using this sticky effect, we achieve a result where the images "collapse" into one another as you progress to each entry in the content section.

This tutorial includes tips on how to convert ID styles to class styles, how to create and use modified classes, how to alter your CSS grid layout on mobile breakpoints, and how to use position: sticky on elements via custom CSS.