<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS grid</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.grid-container {
border: 2px solid black;
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
grid-template-rows: 100px 1fr 1fr 100px;
min-height: calc(100vh - 25px);
grid-template-areas:
"header header"
"nav sidebar"
"content sidebar"
"footer footer";
}
.cell {
border: 2px solid green;
margin: 5px;
}
.header {
grid-area: header;
}
.nav {
grid-area: nav;
}
.content {
grid-area: content;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="cell header">header</div>
<div class="cell nav">nav</div>
<div class="cell content">content</div>
<div class="cell sidebar">sidebar</div>
<div class="cell footer">footer</div>
</div>
</body>
</html>
|
|