Responsive Magazine Layout

Using YUI3 Responsive Grids and minimal custom media queries

About this example

The HTML on this page uses YUI3 Responsive Grids syntax to look great on different screen sizes (resize this page or view it on a smartphone). On larger screens, there are three columns. However, if viewed on a screen that is smaller than 767px, the columns stack vertically. The right-most column, which shows a stack of content on larger widths, changes to show a grid on smaller widths.

This example was inspired by the Boston Globe website.

The unstyled look of hipster food magazines

The latest trendy food and lifestyle magazines are driven by a desire to exist outside the mainstream food world and all that goes with it.

A free market will help fix health care

What Medicare needs is not more top-down control, but the flexibility and competition of a consumer-driven free market.

Boston's last great unsolved mystery

In 1990, Boston’s Isabella Stewart Gardner Museum was robbed of 13 works of art. In this special section, delve into the Globe’s re-examination of the case.

Latest News

Health chief cites 'serious lapses' at state drug lab

The health secretary said lab management failed to alert the state after discovering a “serious breach of protocol” by a chemist.

Patrick addresses controversies on drug lab, hiring

Governor Patrick said a former highway safety chief with a bad driving record made his administration look “ridiculous.”

Powerball jackpot up to $550m

The fast-growing jackpot had been $450 million as recently as Tuesday morning.

Globe Exclusives

Scot Lehigh

End of the Menino era?

Suffolk shifts core of campus downtown

How to donate to Globe Santa