<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 70%;
aspect-ratio: 2/1;
border: 1px solid black;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: start;
}
#container div {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>align-items: start</h2>
<p>Each grid item is aligned at the start of its grid cell in the block direction.</p>
<div id="container">
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
<div style="background-color:lightgreen;min-height:190px;">GREEN</div>
<div style="background-color:coral;min-height:30px;">RED</div>
<div style="background-color:lightblue;min-height:50px;">BLUE</div>
</div>
</body>
</html>