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

<!DOCTYPE html>
<html>
	<head>
		<style>
.grid-container {
    display: grid;
    background-color: dodgerblue;
    padding: 10px;
    grid-gap: 10px;
    grid-auto-columns: 150px auto;
    grid-template:
        "header header" 90px
        "navbar main" 1fr
        "navbar footer" 50px
        / 150px auto;
}

.grid-container > div {
    text-align: center;
    background-color: #c1e2ff;
    padding: 10px;
    font-size: 20px;
}

.header {
    grid-area: header;
}

.navbar {
    grid-area: navbar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}
		</style>
	</head>
	<body>
        <h1>CSS grid-template Property</h1>
        <p>The grid-template property is a shorthand property for the following properties:</p>
        <ul>
            <li>grid-template-rows</li>
            <li>grid-template-columns</li>
            <li>grid-template-areas</li>
        </ul>
        <div class="grid-container">
            <div class="header">Header</div>
            <div class="navbar">Navbar</div>
            <div class="main">Main (the size of the line that contain this item can autogrow as much as it needs.)</div>
            <div class="footer">Footer</div>
        </div>
	</body>
</html>