Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
Image of overflowing button:
I have section-b-home class that has 2 buttons and I'm fairly new to CSS and I cant seem to stop the button from overflowing a section inside the grid element.
Is there any way I can fix the button inside the parent element?
Can you also please check other aspects of my code and if there are issues that needs fixing?
my CSS and HTML:
html {
font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
height: 100%;
}
body {
background: linear-gradient(90deg, rgba(193, 200, 228, 1) 18%, rgba(132, 222, 235, 1) 50%, rgba(130, 220, 235, 1) 52%, rgba(90, 185, 234, 1) 86%);
font-size: 62.5%;
height: 100vh;
box-sizing: border-box;
}
span {
font-size: 0.7rem;
}
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.3rem;
display: block;
}
.wrapper {
background-color: #fff;
opacity: 0.5;
min-height: 100vh;
min-width: 100vw;
display: grid;
grid-template-rows: 0.65fr 9fr 1.45fr;
}
.section-wrapper-home {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
justify-content: center;
align-items: center;
}
section {
height: 100%;
width: 100%;
background: #666;
text-align: center;
}
section:nth-child(odd) {
background: #333;
}
.section-a-home {
grid-column: 1/4;
grid-row: 1/3;
}
.section-a-home span {
font-size: 7rem;
margin-top: 2rem;
color: rgba(16, 20, 24, 0.904);
}
.section-b-home {
grid-column: 4;
grid-row: 1 / 3;
}
.section-c-home {
grid-column: 5;
grid-row: 1 / 3;
}
.section-d-home {
grid-column: 6;
grid-row: 1 / 3;
}
.section-e-home {
grid-column: 1/4;
grid-row: 3;
}
.section-f-home {
grid-column: 4/7;
grid-row: 3;
}
.section-g-home {
grid-column: 1/3;
grid-row: 4;
}
.section-h-home {
grid-column: 3/5;
grid-row: 4;
}
.section-i-home {
grid-column: 5/7;
grid-row: 4;
}
.test {
height: 100%;
}
.test .btn {
width: 100%;
height: 100%;
}
.footer-wrapper {
border-top: 1px solid #555;
}
.header-nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
align-items: center;
height: 100%;
padding: 0 1em;
border-bottom: 1px solid #555;
}
.header-theme i {
padding-left: 1.5rem;
font-size: 1rem;
}
.header-date {
justify-self: flex-start;
}
.header-title {
justify-self: center;
}
.header-theme {
justify-self: end;
}
.footer-nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
align-items: center;
height: 100%;
width: 100%;
}
.footer-nav button {
height: 90%;
width: 95%;
}
.fas {
font-size: 1.6rem;
}
<body>
<div class="wrapper">
<header class="header-wrapper">
<nav class="header-nav">
<div class="header-date">
<span>12-12-2021</span><br /> <span>04:05:06 AM</span>
</div>
<div class="header-title">
<h1>Room Name</h1>
</div>
<div class="header-theme">
<i class="fas fa-sun" id="theme-light"></i>
<i class="fas fa-moon" id="theme-dark"></i>
</div>
</nav>
</header>
<main class="main-wrapper">
<div class="section-wrapper-home">
<section class="section section-a-home">
<h2>Room Temperature</h2>
<span>20.05°C</span>
</section>
<section class="section section-b-home">
<h2>Climate Control</h2>
<div class="test">
<button class="btn">On</button>
<button class="btn">Off</button>
</div>
</section>
<section class="section section-c-home"></section>
<section class="section section-d-home"></section>
<section class="section section-e-home"></section>
<section class="section section-f-home"></section>
<section class="section section-g-home"></section>
<section class="section section-h-home"></section>
<section class="section section-i-home"></section>
</div>
</main>
<footer class="footer-wrapper">
<nav class="footer-nav">
<button><i class="fas fa-home" id="nav-home"></i></button>
<button><i class="fas fa-lightbulb" id="nav-light"></i></button>
<button><i class="fas fa-window-maximize" id="nav-curtain"></i></button>
<button><i class="fas fa-music" id="nav-audio"></i></button>
<button><i class="fas fa-thermometer-half" id="nav-climate"></i></button>
</nav>
</footer>
</div>
</body>
Simply, add overflow: hidden; in the test class.Example:
.section-b-home .test {
overflow: hidden;
}
Related
My 3x3 grid is not scaling as it should. Box 1, 5 and 9 contain some form of text, and the rest of them are pictures. When scaling down, the box with photos are displaying an excessive amount of white, and the ones with text are displaying an excessive amount of blue. I have no idea what is causing this to happen.
I am also looking for a way to center my text in its designated squares. Left aligned, but still centered. I have no idea how to apply both.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-auto-rows: 1fr;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
/* .grid>div {
background: #2b5eaf;
padding: 1em;
} */
/* .grid>div:nth-child(odd) {
background: #2b5eaf;
} */
.box-1,
.box-5,
.box-9 {
background: #2b5eaf;
color: white;
}
.button {
border: none;
color: white;
padding: 16px 50px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 12px;
}
.group1 {
padding: 48px;
justify-content: center;
}
h1 {
font-size: 30px;
}
p {
font-size: 14px;
}
.box-5 {
display: flex;
flex-direction: column;
align-items: center;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.photo>img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.photo {
width: 100%;
height: auto;
}
/* TABLET VIEW */
#media only screen and (min-width: 759px) and (max-width: 1279px) {
.grid {
grid-template-columns: repeat(2, 1fr);
text-align: left;
grid-gap: 0;
}
.grid>div {
height: 100%;
}
.box-2,
.box-6,
.box-7 {
display: none;
}
.box-8 {
grid-column: 2;
grid-row: 3;
}
.box-9 {
grid-column: 1;
}
h1 {
font-size: 24px;
}
}
/* MOBILE VIEW */
#media only screen and (max-width: 759px) {
.grid {
grid-template-columns: 1fr 1fr;
text-align: left;
grid-gap: 0;
}
.box-1 {
grid-row: 3;
grid-column: 1/3;
}
.box-2 {
grid-row: 2;
grid-column: 1;
}
.box-3 {
grid-row: 2;
grid-column: 2;
}
.box-5 {
grid-row: 1;
grid-column: 1/3;
}
.box-7,
.box-8,
.box-9 {
display: none;
}
}
<div class="grid">
<!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
<div class="box-1">
<div class="group1">
<h1 class="quote" style="color:#ffffff" ;>"Lingerie is not about seducing men; It's about embracing womanhood"</h1><br><br>
<p style="color:#ffffff" ;>- Dita Von Teese</p>
</div>
</div>
<div class="box-2">
<img class="photo" src="https://i.imgur.com/p5IOrlS.png" alt="">
</div>
<div class="box-3">
<img class="photo" src="https://i.imgur.com/JKKqZjj.png" alt="">
</div>
<div class="box-4">
<img class="photo" src="https://i.imgur.com/pI3g39l.png" alt="">
</div>
<div class="box-5">
<h1 style="color:#ffffff" ;>Discover Something Sexy In You</h1>
<a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
</div>
<div class="box-6">
<img class="photo" src="https://i.imgur.com/2mVzhR6.png" alt="">
</div>
<div class="box-7">
<img class="photo" src="https://i.imgur.com/bIcsE4S.png" alt="">
</div>
<div class="box-8">
<img class="photo" src="https://i.imgur.com/LnUV9eF.png" alt="">
</div>
<div class="box-9">
<div class="group1">
<h1 style="color:#ffffff" ;>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the only subscription that gets unwrapped TWICE!"</h1><br><br>
<p style="color:#ffffff" ;>- Wendy S.</p>
</div>
</div>
</div>
flex and grid works wonderfully together. Simply add display: flex; to your photos (and use proper selectors - .photo > img is not a proper selector as they are the same element - use img.photo instead). Also use height: 100%; for them to scale properly.
On the boxes where you want to center the text, use flex and its properties align-items: center; to center vertically and justify-content: center; to center horizontally.
I haven't done any styling in the media-query, you can use the same logic as above if you want.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-auto-rows: 1fr;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
/* .grid>div {
background: #2b5eaf;
padding: 1em;
} */
/* .grid>div:nth-child(odd) {
background: #2b5eaf;
} */
.box-1,
.box-5,
.box-9 {
background: #2b5eaf;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.button {
border: none;
color: white;
padding: 16px 50px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 12px;
}
.group1 {
padding: 48px;
justify-content: center;
}
h1 {
font-size: 30px;
}
p {
font-size: 14px;
}
.box-5 {
display: flex;
flex-direction: column;
align-items: center;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
img.photo {
display: flex;
object-fit: cover;
width: 100%;
height: 100%;
}
/*.photo {
width: 100%;
height: auto;
}*/
/* TABLET VIEW */
#media only screen and (min-width: 759px) and (max-width: 1279px) {
.grid {
grid-template-columns: repeat(2, 1fr);
text-align: left;
grid-gap: 0;
}
.grid>div {
height: 100%;
}
.box-2,
.box-6,
.box-7 {
display: none;
}
.box-8 {
grid-column: 2;
grid-row: 3;
}
.box-9 {
grid-column: 1;
}
h1 {
font-size: 24px;
}
}
/* MOBILE VIEW */
#media only screen and (max-width: 759px) {
.grid {
grid-template-columns: 1fr 1fr;
text-align: left;
grid-gap: 0;
}
.box-1 {
grid-row: 3;
grid-column: 1/3;
}
.box-2 {
grid-row: 2;
grid-column: 1;
}
.box-3 {
grid-row: 2;
grid-column: 2;
}
.box-5 {
grid-row: 1;
grid-column: 1/3;
}
.box-7,
.box-8,
.box-9 {
display: none;
}
}
</h1>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div class="grid">
<!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
<div class="box-1">
<div class="group1">
<h1 class="quote" style="color:#ffffff" ;>"Lingerie is not about seducing men; It's about embracing womanhood"</h1><br><br>
<p style="color:#ffffff" ;>- Dita Von Teese</p>
</div>
</div>
<div class="box-2">
<img class="photo" src="https://i.imgur.com/p5IOrlS.png" alt="">
</div>
<div class="box-3">
<img class="photo" src="https://i.imgur.com/JKKqZjj.png" alt="">
</div>
<div class="box-4">
<img class="photo" src="https://i.imgur.com/pI3g39l.png" alt="">
</div>
<div class="box-5">
<h1 style="color:#ffffff" ;>Discover Something Sexy In You</h1>
<a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
</div>
<div class="box-6">
<img class="photo" src="https://i.imgur.com/2mVzhR6.png" alt="">
</div>
<div class="box-7">
<img class="photo" src="https://i.imgur.com/bIcsE4S.png" alt="">
</div>
<div class="box-8">
<img class="photo" src="https://i.imgur.com/LnUV9eF.png" alt="">
</div>
<div class="box-9">
<div class="group1">
<h1 style="color:#ffffff" ;>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the only subscription that gets unwrapped TWICE!"</h1><br><br>
<p style="color:#ffffff" ;>- Wendy S.</p>
</div>
</div>
</div>
</body>
</html>
I have a CSS Grid layout in which I specified the starting/ending rows and columns for each div as you can see below with the CSS
.grid-container {
width: 100%;
height: 100%;
display: grid;
grid-gap: 0;
}
.grid-item {
position: relative;
display: flex;
padding: 0;
border-radius: 10px;
margin: 10px;
background-color: #f6f6f6;
}
.g-1 {
margin-top: 20px;
margin-left: 20px;
background-color: white;
grid-column: 1/10;
grid-row: 1/2;
}
.g-2 {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
grid-column: 10/14;
grid-row: 1/40;
}
.g-3 {
margin-left: 20px;
background-color: #eaf0ff;
grid-column: 1/4;
grid-row: 2/12;
}
.g-4 {
background-color: #ebe3ff;
grid-column: 4/7;
grid-row: 2/12;
}
.g-5 {
background-color: #dff6db;
grid-column: 7/10;
grid-row: 2/12;
}
.g-6 {
margin-left: 20px;
margin-bottom: 20px;
grid-column: 1/5;
grid-row: 12/40;
}
.g-7 {
grid-column: 5/10;
grid-row: 12/28;
}
.g-8 {
margin-bottom: 20px;
grid-column: 5/10;
grid-row: 28/40;
}
which results in this
However, when I then add a simple h1 inside of the blue container .g-3 it expands both vertically and horizontally despite being told that its columns and rows are set to 1/4 and 2/12 respectively.
<div className="view">
<div className="grid-container">
<div className="grid-item g-1">
<h1 className="header">Hello, Levi</h1>
</div>
<div className="grid-item g-2"></div>
<div className="grid-item g-3">
<h2>Testing Size</h2>
</div>
<div className="grid-item g-4"></div>
<div className="grid-item g-5"></div>
<div className="grid-item g-6"></div>
<div className="grid-item g-7"></div>
<div className="grid-item g-8"></div>
</div>
</div>
How can I prevent the contents of the grid items from expanding them from their original layout as seen in the first screenshot, especially when considering there is still plenty of room for the text?
you didn't define any sizing for your columns so the content will define this and you will have a different layout each time you update the content.
You need to define an explicit size for the columns:
.grid-container {
height: 100vh;
min-height:600px;
display: grid;
grid-gap: 0;
grid-auto-columns:1fr; /* this should do the job and force all the columns to be equal */
/* you can also try minmax(0,1fr) (related: https://stackoverflow.com/a/52861514/8620333) */
}
.grid-item {
position: relative;
display: flex;
padding: 0;
border-radius: 10px;
margin: 10px;
background-color: #f6f6f6;
}
.g-1 {
margin-top: 20px;
margin-left: 20px;
background-color: white;
grid-column: 1/10;
grid-row: 1/2;
}
.g-2 {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
grid-column: 10/14;
grid-row: 1/40;
}
.g-3 {
margin-left: 20px;
background-color: #eaf0ff;
grid-column: 1/4;
grid-row: 2/12;
}
.g-4 {
background-color: #ebe3ff;
grid-column: 4/7;
grid-row: 2/12;
}
.g-5 {
background-color: #dff6db;
grid-column: 7/10;
grid-row: 2/12;
}
.g-6 {
margin-left: 20px;
margin-bottom: 20px;
grid-column: 1/5;
grid-row: 12/40;
}
.g-7 {
grid-column: 5/10;
grid-row: 12/28;
}
.g-8 {
margin-bottom: 20px;
grid-column: 5/10;
grid-row: 28/40;
}
<div class="grid-container">
<div class="grid-item g-1">
<h1 class="header">Hello, Levi</h1>
</div>
<div class="grid-item g-2"></div>
<div class="grid-item g-3">
<h2>Testing Size</h2>
</div>
<div class="grid-item g-4"></div>
<div class="grid-item g-5"></div>
<div class="grid-item g-6"></div>
<div class="grid-item g-7"></div>
<div class="grid-item g-8"></div>
</div>
A specific text can't be put in the center in CSS grid.
I have a grid CSS but the text "Post Manager" seems to not go to center. I have made grid items into flex container but only this text seem to not follow the rule. Any thought is appreciated. Thank you.
body {
font-family: sans-serif;
}
.wrapper {
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
width: 100vw;
height: 100vh;
}
.gn {
background-color: #7fd2f0;
grid-row: 1 / 16;
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotateZ(180deg);
}
.ab {
background-color: #85fedd;
grid-column: 2/16;
}
.pm {
background-color: #f7f7f7;
grid-row: 2/16;
grid-column: 2/5;
text-align: center;
}
.wp {
background-color: #c6c6c6;
grid-column: 6/16;
grid-row: 2/16;
}
.center-text {
display: flex;
justify-content: center;
align-items: center;
}
<div class="wrapper">
<div class="center-text gn">Global Navigation</div>
<div class="center-text ab">Application Bar</div>
<div class="center-text pm">Post Manager</div>
<div class="center-text wp">Writing Space</div>
</div>
try this.
.pm {
grid-column: 2/6;
}
I am unable to align text in the center of the grid, both vertical and horizontally, because nothing that I tried seems to work, so I wanted to know what is the problem with my code or how should I do it.
I tried using justify-items: center, align-items: center and even place-items: center center;
This is a my full, hopefully, you can give it a try and see what is wrong with it.
<title> Learning Grid </title>
<style>
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
</body>
To align the text, you could use the line-height approach, but that is not very responsive.
Since you already have the grid layout, you can keep that same idea and add a helper element, like a <span>. Doing that, give you more options to alight the actual text.
Here is an example of how your new HTML would look like:
<main>
<span>Main</span>
</main>
And the CSS for that would be:
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: grid;
}
main > * {
margin: auto;
}
For aligning text to center just use this property: display: flex; align-items: center; justify-content: center;
body {
color: #fff;
font-family: sans-serif;
text-align: center;
}
#content {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
}
#content > * {
padding: 30px;
font-size: 30px;
}
header {
grid-column: 1/13;
text-align: center;
background-color: hotpink;
}
main {
grid-column: 4/13;
grid-row: 2/4;
background-color: darksalmon;
display: flex;
align-items: center;
justify-content: center;
}
aside {
grid-column: 1/4;
grid-row: 2/3;
background-color: cadetblue;
}
nav {
grid-column: 1/4;
grid-row: 3/4;
text-align: center;
font-size: 30px;
background-color: aquamarine;
}
section {
grid-column: 1/13;
grid-row: 4/6;
background-color: coral;
display: flex;
align-items: center;
justify-content: center;
}
footer {
grid-column: 1/13;
grid-row: 6/7;
background-color: cornflowerblue;
}
<div id="content">
<header> Header </header>
<main> Main </main>
<section>Section </section>
<aside>Aside </aside>
<nav> Nav </nav>
<footer> Footer</footer>
</div>
You can use Bootstrap classes for example :
<main class="text-center justify-content-center align-items-center"> Main </main>
Or aligning text over CSS
main {
display: flex;
justify-content: center;
align-items: center;
}
So I've been trying to put an image inside a grid but its causing me problems.
Right now, my biggest issue is that is pushing another grid item down.
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
}
.business {
grid-column: 17;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>
The image in question has a class as business and the item is pushing down has a class as header-title. Header-title should be inside main-info, but when 'business' appears, it pushes header-title down!
!
The issue here is that your image with the business class is overflowing its own grid and the grid of its container.
In order to resolve this add the property overflow: hidden to both the .main-info class and the .business class.
These classes also need the "display: grid" property so the browser can process the grid-column and grid-row property accordingly for those two classes.
Once those additions are made you can tweak the grid-row and grid-column for the the .business class and the .header-title classes accordingly to find your desired positions.
Full CSS and HTML Below:
body {
padding: 0;
margin: 0;
}
.main {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-bar {
grid-row: 1/16;
grid-column: 4/21;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
}
.main-info {
grid-column: 1/21;
grid-row: 1/21;
background: #333;
display: grid;
grid-template: repeat(20, 1fr) / repeat(20, 1fr);
overflow: hidden;
}
.header-title {
grid-column: 3;
grid-row: 2/8;
background: #000;
display: grid;
}
.business {
grid-column: 17;
overflow: hidden;
display: grid;
}
.side-bar {
background: #fff;
grid-row: 1/21;
grid-column: 1/4;
display: grid;
grid-template-rows: repeat(10, 1fr);
border-right: 1px solid #0F6B99;
}
.side-bar img {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -24px;
}
.home-button {
padding: 20px;
text-align: center;
background: #0F6B99;
grid-row: 3/4;
}
.buy-button {
padding: 20px;
text-align: center;
background: #59B3B3;
grid-row: 4/5;
}
.sell-button {
padding: 20px;
text-align: center;
background: #8FCCB8;
grid-row: 5/6;
}
.rent-button {
padding: 20px;
text-align: center;
background: #B8E6B8;
grid-row: 6/7;
}
.article1 {
background: #e6174b;
grid-row: 16/21;
grid-column: 4/11;
}
.article2 {
background: #8FCCB8;
grid-row: 16/21;
grid-column: 11/18;
}
.article3 {
background: #B8E6B8;
grid-row: 16/21;
grid-column: 18/21;
}
<div class="main">
<div class="main-bar">
<div class="main-info">
<img class="business" src="http://pngimg.com/uploads/businessman/businessman_PNG6564.png" alt="">
<div class="header-title">High Quality Realstate Asistance</div>
</div>
</div>
<div class="side-bar">
<!--<img src="img/logo.png" alt="">-->
<div class="home-button">
Home
</div>
<div class="buy-button">
Buy
</div>
<div class="sell-button">
Sell
</div>
<div class="rent-button">
Rent
</div>
</div>
<div class="article1">
</div>
<div class="article2">
</div>
<div class="article3">
</div>
</div>