Untitled
unknown
html
2 years ago
2.8 kB
6
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Tutorial</title>
<style>
.container {
display: grid;
grid-template-rows: 100px 370px 100px;
grid-gap: 5px;
}
.header {
display: grid;
grid-template-columns: 60% auto auto auto;
height: 100px;
grid-column-gap: 5px;
}
.content {
display: grid;
grid-template-columns: 80% auto;
grid-gap: 5px;
}
.main {
display: grid;
grid-template-rows: 100px 260px;
grid-gap: 5px;
}
.main-content {
display: grid;
grid-template-columns: 20% auto;
grid-column-gap: 5px;
}
.main-sub-content {
display: grid;
grid-template-rows: 130px 130px;
grid-gap: 5px;
}
.side-bar {
display: grid;
grid-template-rows: 120px 120px 120px;
grid-gap: 5px;
}
.footer {
display: grid;
grid-template-columns: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div style="background-color: orange;">Site Title</div>
<div style="background-color: pink;">Nav1</div>
<div style="background-color: pink;">Nav2</div>
<div style="background-color: pink;">Nav3</div>
</div>
<div class="content">
<div class="main">
<div style="background-color: skyblue;">Post Title</div>
<div>
<div class="main-content">
<div style="background-color: greenyellow;">Post Media</div>
<div class="main-sub-content">
<div style="background-color: gray;">Main Content</div>
<div style="background-color: yellow;">Main Content Image</div>
</div>
</div>
</div>
</div>
<div class="side-bar">
<div style="background-color: orangered;">Side bar</div>
<div style="background-color: green;">Ads</div>
<div style="background-color: purple;">Other Stuff</div>
</div>
</div>
<div class="footer" style="background-color: brown;">
@2019 Footer
</div>
</div>
</body>
</html>Editor is loading...