方案：媒體物件
媒體物件是我們在網路上隨處可見的一種模式。它指的是一個兩列的盒子，一側是圖片，另一側是描述性文字，例如社交媒體帖子。
依賴項
媒體物件模式需要以下部分或全部特徵
- 在移動裝置上堆疊顯示，在桌面裝置上兩列顯示。
- 圖片可以在左側或右側。
- 圖片可能小或大。
- 媒體物件可以巢狀。
- 無論哪一側最高，媒體物件都應清除內容。
食譜
點選下面程式碼塊中的“Play”按鈕，在 MDN Playground 中編輯示例。
html
<div class="media">
<div class="img">
<img
src="https://mdn.github.io/shared-assets/images/examples/balloons_square.jpg"
alt="Balloons" />
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula
vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit
lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque
porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
condimentum.
</p>
</div>
<div class="footer">An optional footer goes here.</div>
</div>
<div class="media">
<div class="img">
<img
src="https://mdn.github.io/shared-assets/images/examples/sharp-account_box-24px.svg"
width="80px"
alt="Account" />
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula
vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit
lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque
porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
condimentum.
</p>
</div>
<div class="footer"></div>
</div>
css
body {
font: 1.2em sans-serif;
}
img {
max-width: 100%;
}
p {
margin: 0 0 1em 0;
}
@media (width >= 500px) {
.media {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-template-rows: 1fr auto;
grid-template-areas:
"image content"
"image footer";
grid-gap: 20px;
margin-bottom: 4em;
}
.media-flip {
grid-template-columns: 1fr fit-content(250px);
grid-template-areas:
"content image"
"footer image";
}
.img {
grid-area: image;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
}
已做出的選擇
我選擇使用網格佈局來建立媒體物件，因為它允許我在需要時控制二維佈局。這意味著當我們的頁尾上方內容較短時，頁尾可以被推到媒體物件的底部。
使用網格佈局的另一個原因是，我可以使用fit-content來調整圖片軌道的大小。透過使用fit-content和最大尺寸200畫素，當圖片較小（例如圖示）時，軌道只會變得與圖片的大小一樣大，即max-content大小。如果圖片較大，軌道會在200畫素處停止增長，並且由於圖片應用了max-width 100%，它會縮小以繼續適應列內。
透過使用grid-template-areas來實現佈局，我可以在CSS中看到這種模式。我定義網格的條件是視口寬度為500畫素，因此在較小的裝置上，媒體物件會堆疊顯示。
該模式的一個選項是翻轉它，將圖片切換到另一側——這透過新增media-flip類來完成，該類定義了一個翻轉的網格模板，導致佈局映象。
當我們將一個媒體物件巢狀在另一個媒體物件中時，我們需要將其放置在常規佈局的第二個軌道中，並在翻轉時放置在第一個軌道中。
另見
fit-content屬性- 使用網格模板區域
- CSS 網格佈局模組