I have a sidebar. I have main content. I want to position my main content div next to my left side bar. My main content div is in the form of a CSS-grid layout. I determined the grid will be best to contain the information I need to display, depicted by a mock-up I was given. I was exploring the option of making the entire HTML page a grid, but I am unsure how to tackle this. So, I figured I will make create a div for my side bar and make it stay there while my main content, the grid, will move around that. But to no avail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Grid</title>
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="scratch.css">
</head>
<style>
body {
background: darkgrey;
height: 1000px;
position: relative;
}
.side-bar {
background: red;
padding: 0;
margin: 0;
width: 202px;
height: 100%;
position: relative;
}
.side-bar p{
padding: 0;
margin: 0;
}
.grid-container {
display: grid;
background: #E1E1E1;
height: 500px;
width: 1100px;
grid-template-columns: 250px 250px 250px 250px;
grid-template-rows: 200px 200px;
grid-gap: 30px 20px;
padding: 0;
margin: 0 25px 0 30px;
justify-content: right;
align-content: center;
position: relative;
left: 400px;
}
.grid-items {
font-weight: bold;
}
.grid-item1 {
background: greenyellow;
}
.grid-item2 {
background: rosybrown;
}
.grid-item3 {
background: cadetblue;
}
.grid-item4 {
background: darkturquoise;
}
.grid-item5 {
background: darkkhaki;
grid-column: span 2;
}
.grid-item6 {
background: lightblue;
grid-column: span 2;
}
</style>
<body>
<div class="side-bar">
<p>Side Bar</p>
</div>
<div class="grid-container">
<div class="grid-items grid-item1">
<p>Grid Item 1</p>
</div>
<div class="grid-items grid-item2">
<p>Grid Item 2</p>
</div>
<div class="grid-items grid-item3">
<p>Grid Item 3</p>
</div>
<div class="grid-items grid-item4">
<p>Grid Item 4</p>
</div>
<div class="grid-items grid-item5">
<p>Grid Item 5</p>
</div>
<div class="grid-items grid-item6">
<p>Grid Item 6</p>
</div>
</div>
</body>
</html>
Your best bet is to have a main grid that contains the sidebar and a grid inside it that contains the main content:
body,
html {
background: darkgrey;
height: 100%;
margin: 0;
}
#horizontal-menu {
background: lightblue;
padding: 8px;
margin-bottom: 15px;
}
#horizontal-menu p {
margin: 0;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 15px;
height: 100%;
}
.side-bar {
background: red;
padding: 0;
margin: 0;
height: 100%;
grid-column: 1 / 2;
}
.grid-items-container {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 30px 20px;
background: #E1E1E1;
padding: 15px;
}
.side-bar p {
padding: 0;
margin: 0;
}
.grid-items {
font-weight: bold;
}
.grid-item1 {
background: greenyellow;
}
.grid-item2 {
background: rosybrown;
}
.grid-item3 {
background: cadetblue;
}
.grid-item4 {
background: darkturquoise;
}
.grid-item5 {
background: darkkhaki;
grid-column: span 2;
}
.grid-item6 {
background: lightblue;
grid-column: span 2;
}
<div id="horizontal-menu">
<p>Menu</p>
</div>
<div class="grid-container">
<div class="side-bar">
<p>Side Bar</p>
</div>
<div class="grid-items-container">
<div class="grid-items grid-item1">
<p>Grid Item 1</p>
</div>
<div class="grid-items grid-item2">
<p>Grid Item 2</p>
</div>
<div class="grid-items grid-item3">
<p>Grid Item 3</p>
</div>
<div class="grid-items grid-item4">
<p>Grid Item 4</p>
</div>
<div class="grid-items grid-item5">
<p>Grid Item 5</p>
</div>
<div class="grid-items grid-item6">
<p>Grid Item 6</p>
</div>
</div>
</div>