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

<!DOCTYPE html>
<html>
	<head>
		<style>
.grid-container {
    display: grid;
    background-color: dodgerblue;
    padding: 10px;
    grid-auto-columns: 150px auto;
    grid-template-areas:
        "header header"
        "navbar main"
        "navbar footer";
}

.grid-container > div {
    text-align: center;
    background-color: #c1e2ff;
    padding: 10px;
    font-size: 20px;
    border: 1px solid;
}

.header {
    grid-area: header;
}

.navbar {
    grid-area: navbar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}
		</style>
	</head>
	<body>
        <h1>CSS grid-template-areas And grid-auto-columns Properties</h1>
		<p>We used the grid-template-areas property to specifies areas within the grid 
            layout and the grid-auto-columns property to define the size of each column.</p>
        <div class="grid-container">
            <div class="header">Header</div>
            <div class="navbar">Navbar</div>
            <div class="main">Main</div>
            <div class="footer">Footer</div>
        </div>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <style>
.grid-container {
    display: grid;
    background-color: dodgerblue;
    padding: 10px;
    grid-auto-columns: 150px auto;
    grid-template-areas:
        "header header"
        "navbar main"
        "navbar footer";
}
​
.grid-container > div {
    text-align: center;
    background-color: #c1e2ff;
    padding: 10px;
    font-size: 20px;
    border: 1px solid;
}
​
.header {
    grid-area: header;
}
​
.navbar {
    grid-area: navbar;
}
​
.main {
    grid-area: main;
}
​
.footer {
    grid-area: footer;
}
        </style>
    </head>
    <body>
        <h1>CSS grid-template-areas And grid-auto-columns Properties</h1>
        <p>We used the grid-template-areas property to specifies areas within the grid 
            layout and the grid-auto-columns property to define the size of each column.</p>
        <div class="grid-container">
            <div class="header">Header</div>
            <div class="navbar">Navbar</div>
            <div class="main">Main</div>
            <div class="footer">Footer</div>
        </div>
    </body>
</html>