Thinking About Web Layouts from a Two-Dimensional Perspective

Recently, I encountered a requirement to implement a responsive webpage as shown in the image below. It became clear that this layout could not be achieved using traditional one-dimensional layout methods, as the containers they belong to differ between the two sizes.

For example, the sidebar should be contained within the main parent container, but it also needs to align with the top of the intro on larger device sizes. Clearly, such a requirement is difficult to achieve with traditional CSS layouts. Whether using negative margin to push elements, or absolute, transform, it can quickly become chaotic and hard to maintain, even requiring JavaScript to calculate positions 😐.

After resolving this with CSS Grid and Subgrid, I felt it was a great case study, so I wrote a complete article: CSS Grid Real Use Case: The Process of Creating an Extended Sidebar🔗