|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<style> |
|
|
html, body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
.grid-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(5, 1fr); |
|
|
grid-template-rows: repeat(2, 1fr); |
|
|
width: 100vw; |
|
|
height: 100vh; |
|
|
gap: 10px; |
|
|
box-sizing: border-box; |
|
|
padding: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
.item { |
|
|
display: flex; |
|
|
background: #ccc; |
|
|
} |
|
|
|
|
|
.item img { |
|
|
flex: 1; |
|
|
width: 100%; |
|
|
height: auto; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.item video { |
|
|
flex: 2; |
|
|
width: 100%; |
|
|
height: auto; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
|
|
|
.empty { |
|
|
background: #eee; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="grid-container"> |
|
|
|
|
|
<div class="item"> |
|
|
<img src="1.webp" alt="1"> |
|
|
<video src="1.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="2.webp" alt="2"> |
|
|
<video src="2.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item empty"></div> |
|
|
<div class="item empty"></div> |
|
|
<div class="item empty"></div> |
|
|
|
|
|
|
|
|
<div class="item"> |
|
|
<img src="3.webp" alt="3"> |
|
|
<video src="3.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item"> |
|
|
<img src="4.webp" alt="4"> |
|
|
<video src="4.mp4" autoplay loop muted></video> |
|
|
</div> |
|
|
<div class="item empty"></div> |
|
|
<div class="item empty"></div> |
|
|
<div class="item empty"></div> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
