Media Object is a pattern we see all over the web. Named by Nicole Sullivan it refers to a two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet.
Media Object pattern needs some or all of the following characteristics:
I have chosen to use Grid Layout for the media object as it allows me to control the layout in two dimensions when I need to. This means that when we have a footer, with short content above, the footer can be pushed down to the bottom of the media object.
Another reason to use Grid Layout is in order that I can use
fit-content()
for the track sizing of the image. By using
fit-content
with a maximum size of 200 pixels, when we have a small image such as the icon, the track only gets as large as the size of that image — the
max-content
size. If the image is larger, the track stops growing at 200 pixels and as the image has a
max-width
of 100% applied, it scales down so that it continues to fit inside the column.
By using
grid-template-areas
to achieve the layout, I can see the pattern in the CSS. I define my grid once we have a max-width of 500 pixels, so on smaller devices the media object stacks.
An option for the pattern is to flip it to switch the image to the other side — this is done by adding the
media-flip
class, which defines a flipped grid template causing the layout to be mirrored.
When we nest one media object inside another we need to place it into the second track in the regular layout, and the first track when flipped.
There are a number of possible fallbacks for this pattern, depending on the browsers you wish to support. A good catch-all would be to float the image left, and to add a clearfix to the box to ensure that it contained the floats.
Once floated elements become grid items the float no longer applies so you don’t need to do anything special to clear the float.
What you will need to do is remove any margins applied to the item, and any widths which we don’t need in a grid context (we have the
gap
property to control it in grids, and the track takes control of the sizing).
The various layout methods have different browser support. See the charts below for details on basic support for the properties used.
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
grid-template-areas
|
Chrome
完整支持
57
|
Edge 完整支持 16 |
Firefox
完整支持
52
|
IE 不支持 No |
Opera
完整支持
44
|
Safari 完整支持 10.1 | WebView Android 完整支持 57 |
Chrome Android
完整支持
57
|
Firefox Android
完整支持
52
|
Opera Android
完整支持
43
|
Safari iOS 完整支持 10.3 | Samsung Internet Android 完整支持 6.0 |
完整支持
不支持
用户必须明确启用此特征。
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
float
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 4 | Opera 完整支持 7 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
Flow-relative values
inline-start
and
inline-end
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 55 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 55 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
