محرر ويب أونلاين

<!DOCTYPE html>
<html>
	<head>
		<style>
.grid-container {
    display: grid;
    background-color: dodgerblue;
    padding: 10px;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
}

.grid-container > div {
    text-align: center;
    background-color: #c1e2ff;
    padding: 10px;
    font-size: 20px;
    border: 1px solid;
}

.item-1 {
    grid-column: 1 / 3;
}

.item-2 {
    grid-column: 1 / 2;
}

.item-3 {
    grid-column: 2 / 3;
}

.item-4 {
    grid-column: 1 / 2;
}

.item-5 {
    grid-column: 2 / 3;
}
		</style>
	</head>
	<body>
        <h1>CSS grid-auto-rows Property</h1>
		<p>The 'grid-auto-rows' property specifies a default row size for all items in the grid.</p>
		<p>The '1fr' set the size of each rows to the one row who has the maximum size.</p>
        <div class="grid-container">
            <div class="item-1">One</div>
            <div class="item-2">Two<br>(Extra Height Affect All)</div>
            <div class="item-3">Three</div>
            <div class="item-4">Four</div>
            <div class="item-5">Five</div>
        </div>
	</body>
</html>