1
+ <!doctype html>
2
+
3
+ < html lang ="en ">
4
+
5
+ < head >
6
+ < meta charset ="utf-8 ">
7
+ <!-- this is an example from the MDN Layout Cookbook -->
8
+ < title > CSS Cookbook: media objects</ title >
9
+
10
+ < style >
11
+ body {
12
+ background-color : # fff ;
13
+ color : # 333 ;
14
+ font : 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
15
+ padding : 0 ;
16
+ margin : 0 ;
17
+ }
18
+
19
+ img {
20
+ max-width : 100% ;
21
+ }
22
+
23
+ p {
24
+ margin : 0 0 1em 0 ;
25
+ }
26
+
27
+ @media (min-width : 500px ) {
28
+ .media {
29
+ display : grid;
30
+ grid-template-columns : fit-content (200px ) 1fr ;
31
+ grid-template-rows : 1fr auto;
32
+ grid-template-areas :
33
+ "image content"
34
+ "image footer" ;
35
+ grid-gap : 20px ;
36
+ margin-bottom : 4em ;
37
+ }
38
+
39
+ .media-flip {
40
+ grid-template-columns : 1fr fit-content (250px );
41
+ grid-template-areas :
42
+ "content image"
43
+ "footer image" ;
44
+ }
45
+
46
+ .media > .media {
47
+ grid-column-start : 2 ;
48
+ }
49
+
50
+ .media-flip > .media {
51
+ grid-column-start : 1 ;
52
+ }
53
+
54
+ .img {
55
+ grid-area : image;
56
+ }
57
+
58
+ .content {
59
+ grid-area : content;
60
+ }
61
+
62
+ .footer {
63
+ grid-area : footer;
64
+ }
65
+
66
+ }
67
+ </ style >
68
+
69
+ </ head >
70
+
71
+ < body >
72
+
73
+ < div class ="media ">
74
+
75
+ < div class ="img ">
76
+ < img src ="balloon-sq2.jpg " alt ="Balloons ">
77
+ </ div >
78
+
79
+ < div class ="content ">
80
+ < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
81
+ maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
82
+ aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
83
+ condimentum.</ p >
84
+ </ div >
85
+ < div class ="footer ">
86
+ An optional footer goes here.
87
+ </ div >
88
+ </ div >
89
+
90
+ < div class ="media ">
91
+
92
+ < div class ="img ">
93
+ < img src ="sharp-account_box-24px.svg " width ="80px " alt ="Account ">
94
+ </ div >
95
+ < div class ="content ">
96
+ < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
97
+ maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
98
+ aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
99
+ condimentum.</ p >
100
+ </ div >
101
+ < div class ="footer "> </ div >
102
+ </ div >
103
+
104
+ < div class ="media media-flip ">
105
+
106
+ < div class ="img ">
107
+ < img src ="balloon-sq2.jpg " alt ="Balloons ">
108
+ </ div >
109
+
110
+ < div class ="content ">
111
+ < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
112
+ maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
113
+ aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
114
+ condimentum.</ p >
115
+ </ div >
116
+ < div class ="footer ">
117
+ An optional footer goes here.
118
+ </ div >
119
+ </ div >
120
+
121
+ < div class ="media ">
122
+
123
+ < a class ="img ">
124
+ < img src ="balloon-sq2.jpg " alt ="Balloons ">
125
+ </ a >
126
+
127
+ < div class ="content ">
128
+
129
+ < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
130
+ maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
131
+ aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
132
+ condimentum.</ p >
133
+ </ div >
134
+
135
+ < div class ="footer "> </ div >
136
+
137
+ < div class ="media ">
138
+
139
+ < a class ="img ">
140
+ < img src ="balloon-sq2.jpg " alt ="Balloons ">
141
+ </ a >
142
+
143
+ < div class ="content ">
144
+
145
+ < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
146
+ maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
147
+ tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
148
+ venenatis condimentum.</ p >
149
+ </ div >
150
+
151
+ < div class ="footer "> </ div >
152
+
153
+ </ div >
154
+
155
+ </ div >
156
+
157
+
158
+
159
+
160
+ </ html >
0 commit comments