a wide header that spans multiple columns and then define three columns, each occupying one fraction of the available space, with a few 10‑pixel columns in between (see Figure 11). The results are shown in Figure 12. Figure 11 Defining a Layout for Wider Screens @media only screen and (min‑width: 1220px) { #mygrid { display: ‑ms‑grid; ‑ms‑grid‑columns: 1fr 10px 1fr 10px 1fr; ‑ms‑grid‑rows: 100px 1fr; margin: 5px; } #myheader { ‑ms‑grid‑row: 1; ‑ms‑grid‑column: 1; ‑ms‑grid‑column‑span: 5; background‑color: #EEB215; } #block1 { ‑ms‑grid‑row: 2; ‑ms‑grid‑column: 1; background‑color: #B2B0B0; } #block2 { ‑ms‑grid‑row: 2; ‑ms‑grid‑column: 3; background‑color: #726E6E; } #block3 { ‑ms‑grid‑row: 2; ‑ms‑grid‑column: 5; background‑color: #515050; } }
Figure 12 Three Side‑by‑Side Columns with a Spanning Header The Grid specification is a welcome addition for implementing responsive web designs. Two other new CSS specifications are also worth mentioning: the Flexible Box Layout Module (Flexbox) and The Multi‑column Layout Module. Both show a great deal of promise for designing responsive Web sites. Flexbox, currently a working draft at the W3C, adds support for four new layout modes: block, inline, table, and positioned. It enables you to lay out complex pages with relative position and constant size, even when screen sizes change. The multi‑column layout module is currently a candidate recommendation at the W3C. This solution is for content that you need to lay out in columns and that flow from one column into the next. You can view an interactive example of multi‑column layout in this lab.
Flexible Images and Media The final aspect of responsive Web design is flexible images and media. Basically, this feature allows you to adapt your images or other media to load differently depending on the device, either by scaling or by using the CSS overflow property. Scaling in CSS is pretty simple to implement for both images and video. You can set the media element’s max‑width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size. img, object { max‑width: 100%; } An alternative to scaling images is cropping them with CSS. For example, applying overflow:hidden allows you to crop images dynamically so that they fit into their containers as the containers resize to fit a new screen environment. Having several options to scale and crop images in CSS might not be enough. Do you really need to take up all of a visitor’s mobile bandwidth because you don’t have a smaller version of an image? To better serve users, flexible images might mean using an alternative image—or even no image at all. Folks in the Web design community are coming up with solutions based on JavaScript and cookies, and you can expect more of this as responsive Web design evolves and becomes the basis for many quality Web sites.