struggling here with a CSS Grid that should consist of 7 squares per row to build a calendar style layout. Layout seems to be okay, but I cannot center the title and subtitle in the middle of the item. I tried margin:auto and vertical-align:middle, wrapper span or div to align the h1/h2 inside there. Please see working example below with text sticking to the top of the item.
Any suggestion is very welcome!
fj
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
color: white;
}
.grid-container {
display: grid;
grid-gap: 1px;
grid-template-columns: repeat(7, 1fr);
}
.grid-item {
background-image: url(https://images.pexels.com/photos/787961/pexels-photo-787961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
align-content: center;
height: 14vw;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
<div class="grid-item" style="position: relative;align-content:center">
<span style="align-content:center; vertical-align: middle; margin: auto">
<h1 style="font-size: 13px">title</h1>
<h2 style="font-size: 11px">subtitle</h2>
</span>
<span style="position: absolute; bottom: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">Mo, 21.09.</span>
<span style="position: absolute; top: 10px;right: 10px;font-size: 0.8vw;font-weight: 700">x</span>
</div>
</div>
</body>
</html>
