Main Section

A sidebar layout is very popular and is used on a huge number of website layouts create with Wordpress and its derivatives. The CSS Grid Layout Module is used here to solve the problem of a sidebar with less content than the main section. This creates an ugly, unbalanced design with a large expanse of white space.
A grid layout consists of a parent element, with one or more child elements.
This example contains two elements - an article and an aside. The relative widths are calculated in the CSS. The article and the aside are assigned relative column widths using fractional units (fr) - in this case 2fr and 1fr.
Layout Switch
On computers and tablets in landscape mode, the main and sidebar sit side by side. As the viewport width is reduced, the layout switches at the break point so that both elements become full width and the sidebar slides below the main article. In this example, the break point is set to 799px so that the sidebar drops below the main section when viewed on an tablet in portrait mode and a mobile phone in both landscape and portrait.
Content
The columns have an optional header with a min height control to keep them even.
The optional images have alt text and can be lazy loading.
The optional links can open internal/external pages and have a min width control to keep them balanced.
Layout Styles
The columns have controls for setting the relative widths and are sperated using the grid gap control.
The columns have controls for border with, color and border radius if more separation is required.