How do you fill the remaining space with grid container in css? - html

I'm new to this. I'm trying to make a webpage with 100vh height, where the header and footer will take 80px and 50px respectively. Whatever space is left in middle should be taken over by a grid container completely. I did succeed so far, but the middle container is taking only as much as its content needs. Please see the below image for refrence:
Also, I was under the impression that the footer tag will put the section at the bottom of the viewport automatically. But that's not happening either. Do I have to use absolute positioning?
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
header {
padding-left: 40px;
padding-right: 40px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.nav-menuList {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
}
.nav-list {
list-style-type: none;
font-family: sans-serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 4.4rem;
color: #000;
}
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 4rem;
grid-template-areas:
"h1"
"h-btn";
padding: 0 40px;
align-self: center;
}
h1 {
font-family: sans-serif;
font-size: 4.8rem;
font-weight: 300;
line-height: 6.4rem;
color: #000;
grid-area: h1;
width: 75%;
}
.button-group {
grid-area: h-btn;
}
footer {
padding: 0 40px;
}
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="black" />
</svg>
</div>
<div class="menu">
<ul class="nav-menuList">
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="grid-container">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="button-group">
<button class="primary-btn hero-btn">CTA</button>
</div>
</div>
</main>
<footer>This is footer</footer>
</div>
</body>


Flexbox solution:
Apply to the body or the flexbox container: min-height: 100vh;.
Apply to the header: height: 80px; and to the footer: height: 50px;.
Make the main or content-box consume the remaining space by adding: flex-grow: 1;
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 80px;
}
footer {
height: 50px;
}
main {
flex-grow: 1;
}
/* for demonstration purpose only */
body {
margin: 0;
}
header,
footer,
main {
display: flex;
justify-content: center;
align-items: center;
}
header {
background-color: pink;
}
main {
background-color: lightblue;
}
footer {
background-color: lightgreen;
}
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
CSS-Grid solution:
Apply to the body or the grid-container: min-height: 100vh;
Define the rows: grid-template-rows: 80px auto 50px; which means that auto will consume all remaining space.
body {
height: 100vh;
display: grid;
grid-template-rows: 80px auto 50px;
}
/* for demonstration purpose only */
body {
margin: 0;
}
header,
footer,
main {
display: flex;
justify-content: center;
align-items: center;
}
header {
background-color: pink;
}
main {
background-color: lightblue;
}
footer {
background-color: lightgreen;
}
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>


You can set .container also as grid :
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-rows: minmax(80px, max-content) 1fr minmax(50px,max-content);
height: 100%;
}
header {
padding-left: 40px;
padding-right: 40px;
}
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.nav-menuList {
display: inline-flex;
justify-content: space-between;
align-items: center;
gap: 4rem;
}
.nav-list {
list-style-type: none;
font-family: sans-serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 4.4rem;
color: #000;
}
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
row-gap: 4rem;
grid-template-areas:
"h1"
"h-btn";
padding: 0 40px;
align-self: center;
}
h1 {
font-family: sans-serif;
font-size: 4.8rem;
font-weight: 300;
line-height: 6.4rem;
color: #000;
grid-area: h1;
width: 75%;
}
.button-group {
grid-area: h-btn;
}
footer {
padding: 0 40px;
}
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4C0 1.79086 1.79086 0 4 0H28C30.2091 0 32 1.79086 32 4V28C32 30.2091 30.2091 32 28 32H4C1.79086 32 0 30.2091 0 28V4Z" fill="black" />
</svg>
</div>
<div class="menu">
<ul class="nav-menuList">
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
<li class="nav-list">menu</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="grid-container">
<h1>Lorem ipsum dolor sit amet</h1>
<div class="button-group">
<button class="primary-btn hero-btn">CTA</button>
</div>
</div>
</main>
<footer>This is footer</footer>
</div>
</body>

Related

CSS overflow on resize

I made a simple card with CSS. I'm trying to make it responsive but when I resize dimensions using DevTools, the card overflows over entire page. I know overflow property prevents this but I think there exists better ways to design.
The problem:
This is standard look of card
This is the look of card when I resize:
How can I prevent this from happening? or at least make them look good?
HTML:
<body>
<div class="container">
<div class="card">
<span class="circle">
<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
fill="#FC7614"
/>
</svg>
</span>
<h2>How did we do?</h2>
<p>
Please let us know how we did with your suppoer request. All feedback
is appreciated to help us improve our offering!
</p>
<div class="rating">
<span class="circle">1</span>
<span class="circle">2</span>
<span class="circle">3</span>
<span class="circle">4</span>
<span class="circle">5</span>
</div>
<button class="btn">SUBMIT</button>
</div>
</div>
</body>
CSS:
#import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Overpass:wght#400;700&display=swap");
:root {
--mobile-width: 375px;
--desktop-width: 1440px;
--btn-hover: hsl(0, 0%, 100%);
--rating-hover: hsl(217, 12%, 63%);
--body-background: #121417;
--card-background: #252d37;
--p-font-size: 15px;
--p-color: hsl(216, 12%, 54%);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: "Overpass", sans-serif;
font-size: 15px;
}
.container {
width: 100%;
height: 100%;
background-color: var(--body-background);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* overflow: scroll; */
}
.card {
width: 20rem;
background-color: var(--card-background);
padding: 20px;
border-radius: 15px;
max-width: calc(100% - 2rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.card > * {
margin-bottom: 1rem;
}
.card h2 {
color: var(--btn-hover);
font-weight: 700;
letter-spacing: 2px;
font-size: 700;
}
.card p {
color: var(--p-color);
font-size: 15px;
font-weight: 100 !important;
}
.card .rating {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.card .circle {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #30363f;
width: 2.5rem;
height: 2.5rem;
text-align: center;
border-radius: 50%;
color: var(--p-color);
}

First of all, what device of yours has an 88 pixels viewport width? That's not small, it's extra tiny. Even smartwatches are bigger than that.
After analyzing your code, to make it fit to such a tiny screen you need to adapt each sections that are overflowing:
your pagination/ratings needs a flex-wrap: wrap;
And the card's text need to be broken so you can either use word-break: break-all; or hyphens: auto;
#import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,500;9..144,600&family=Overpass:wght#400;700&display=swap");
:root {
--mobile-width: 375px;
--desktop-width: 1440px;
--btn-hover: hsl(0, 0%, 100%);
--rating-hover: hsl(217, 12%, 63%);
--body-background: #121417;
--card-background: #252d37;
--p-font-size: 15px;
--p-color: hsl(216, 12%, 54%);
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: "Overpass", sans-serif;
font-size: 15px;
}
.container {
width: 100%;
height: 100%;
background-color: var(--body-background);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* overflow: scroll; */
}
.card {
width: 20rem;
background-color: var(--card-background);
padding: 20px;
border-radius: 15px;
max-width: calc(100% - 2rem);
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5rem;
}
.card > * {
margin-bottom: 1rem;
}
.card h2 {
color: var(--btn-hover);
font-weight: 700;
letter-spacing: 2px;
font-size: 700;
}
.card p {
color: var(--p-color);
font-size: 15px;
font-weight: 100 !important;
/* ADDED HERE */
hyphens: auto;
}
.card .rating {
display: flex;
justify-content: space-between;
gap: 1rem;
/* ADDED HERE*/
flex-wrap: wrap;
}
.card .circle {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #30363f;
width: 2.5rem;
height: 2.5rem;
text-align: center;
border-radius: 50%;
color: var(--p-color);
}
<body>
<div class="container">
<div class="card">
<span class="circle">
<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="m9.067.43 1.99 4.031c.112.228.33.386.58.422l4.45.647a.772.772 0 0 1 .427 1.316l-3.22 3.138a.773.773 0 0 0-.222.683l.76 4.431a.772.772 0 0 1-1.12.813l-3.98-2.092a.773.773 0 0 0-.718 0l-3.98 2.092a.772.772 0 0 1-1.119-.813l.76-4.431a.77.77 0 0 0-.222-.683L.233 6.846A.772.772 0 0 1 .661 5.53l4.449-.647a.772.772 0 0 0 .58-.422L7.68.43a.774.774 0 0 1 1.387 0Z"
fill="#FC7614"
/>
</svg>
</span>
<h2>How did we do?</h2>
<p>
Please let us know how we did with your suppoer request. All feedback
is appreciated to help us improve our offering!
</p>
<div class="rating">
<span class="circle">1</span>
<span class="circle">2</span>
<span class="circle">3</span>
<span class="circle">4</span>
<span class="circle">5</span>
</div>
<button class="btn">SUBMIT</button>
</div>
</div>
</body>

Can some one tell me why this css code is not working properly?

Here is the JSfiddle complete code link:
CODE
my clock code output
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: 28px;
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
Can any one tell me how to improve this code
I tried to make is completely responsive but it is not not working,
I tired to use flex to make the element appear in center of page.
Then I use grid to create the clock layout and i didn't knew how to align the cells so I used grid again in them. I was using rem and em to make responsive code but it didn't work out well. please review my code.

This is because of the font-size of the time-box div that is not responsive (28px whatever the device size), To make it responsive I added media queries to change the font depending on the device width, As presented in this example:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
}
#media (min-width:768px) {
.time-box {
font-size: 18px;
}
}
#media (min-width:1024px) {
.time-box {
font-size: 22px;
}
}
#media (min-width:1280px) {
.time-box {
font-size: 28px;
}
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
You can as well use calc() function, so you can calculate your font size relative to the screen width like this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: calc(18px + 0.390625vw);
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>

the issue with the CSS code in the Stack Overflow question is that the left and right values for the #nav element are set to 0. This causes the element to take up the full width of its parent element, which is likely not the intended behavior.
To fix this issue, you can try setting the left and right values to auto like this:
#nav {
position: fixed;
top: 0;
left: auto;
right: auto;
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
With this change, the #nav element will no longer take up the full width of its parent element and will instead be positioned at the top of the page with its width set to 100%.

How to Position a single component at end in flex with direction column? [duplicate]

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Fix footer to bottom of page
(14 answers)
How can I position my div at the bottom of its container?
(25 answers)
Closed 2 years ago.
I want to position the footer element at the end of the page {body is display: flex; flex-direction: column;} but when I add justify-self: flex-end in footer, it doesn't work correctly as it did when flex direction is row.
How can i do it?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: #ff0;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-items: center;
align-items: center;
justify-content: center;
height: fit-content;
padding: 0.5rem 0;
}
header span.logo {
font-size: 1.75rem;
font-weight: 500;
}
header svg {
position: absolute;
right: 5%;
}
footer {
text-align: center;
padding: 0.5rem 0;
font-size: 14px;
}
<header>
<span class="logo">deCoding</span>
<svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
<path />.........</svg>
</header>
<nav>
Catogary
Catogary
Catogary
</nav>
<footer>Copyright © 2020 deCoding</footer>

you can use on footer margin-top:auto or you add flex:1 on the div before the footer like here its the nav
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: #ff0;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-items: center;
align-items: center;
justify-content: center;
height: fit-content;
padding: 0.5rem 0;
}
header span.logo {
font-size: 1.75rem;
font-weight: 500;
}
header svg {
position: absolute;
right: 5%;
}
footer {
margin-top:auto;
text-align: center;
padding: 0.5rem 0;
font-size: 14px;
}
<body>
<header>
<span class="logo">deCoding</span>
<svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
<path />.........</svg>
</header>
<nav>
Catogary
Catogary
Catogary
</nav>
<footer>Copyright © 2020 deCoding</footer>
</body>

Adding
flex: 1 1 auto;
To your nav should solve the issue.
nav {
flex: 1 1 auto;
}

I hope I understood the question correctly!
Option 1: If you have a DIV element are the content - you can set a minimum height
Option 2: Add nav::after element
Option 3: Add position: absolute; bottom: 0px; on element footer
Option 4: Add flex: auto; on the last element before footer
Option 1
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: #ccc;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-items: center;
align-items: center;
justify-content: center;
height: fit-content;
padding: 0.5rem 0;
}
header span.logo {
font-size: 1.75rem;
font-weight: 500;
}
header svg {
position: absolute;
right: 5%;
}
.content {
min-height: 90vh;
}
footer {
text-align: center;
padding: 0.5rem 0;
font-size: 14px;
}
<header>
<span class="logo">deCoding</span>
<svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
<path />.........</svg>
</header>
<nav>
Catogary
Catogary
Catogary
</nav>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus reiciendis sunt dolorum natus! Vel, eos autem, voluptatem labore modi sint dolor deserunt cumque error officia totam atque accusamus temporibus porro.
</div>
<footer>Copyright © 2020 deCoding</footer>
Option 2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: #ccc;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-items: center;
align-items: center;
justify-content: center;
height: fit-content;
padding: 0.5rem 0;
}
header span.logo {
font-size: 1.75rem;
font-weight: 500;
}
header svg {
position: absolute;
right: 5%;
}
footer {
text-align: center;
padding: 0.5rem 0;
font-size: 14px;
}
nav::after {
content: '';
display: block;
min-height: 90vh;
}
<header>
<span class="logo">deCoding</span>
<svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
<path />.........</svg>
</header>
<nav>
Catogary
Catogary
Catogary
</nav>
<footer>Copyright © 2020 deCoding</footer>

Do you want like that way...I have added position:absolute in footer.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: #ff0;
position: relative;
}
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
justify-content: center;
align-items: center;
justify-content: center;
height: fit-content;
padding: 0.5rem 0;
}
header span.logo {
font-size: 1.75rem;
font-weight: 500;
}
header svg {
position: absolute;
right: 5%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 0.5rem 0;
font-size: 14px;
}
<header>
<span class="logo">deCoding</span>
<svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
<path />.........</svg>
</header>
<nav>
Catogary
Catogary
Catogary
</nav>
<footer>Copyright © 2020 deCoding</footer>

random padding around entire page? [duplicate]

This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I built a homepage for my portfolio and there seems to be a blank invisible square acting as a border. I've tried making many adjustments to css but nothing I do seems to be controlling this. I was under the impression is would be something to do with padding or margin but nothing seems to change it. Has anyone ever experienced this? I'm sure its a super simple fix.
Any idea how to remove and make full screen? Thank you for your help.
#import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
#media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></li>
</ul>
</footer>
</div>
</div>
</body>
</html>

Add a margin: 0 to your body:
#import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
margin: 0;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
#media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></li>
</ul>
</footer>
</div>
</div>
</body>
</html>

Multi row CSS grid without nesting

FOR EXAMPLE, SEE THIS PEN
I have 6 menu items and I want to achieve this grid layout without nesting. I'm a newbie in CSS grid and I thought using the CSS grid will be the best way to achieve what in the design.
This is what I have done so far.
ul {
list-style: none;
padding-left: 0;
}
.menu-items {
text-align: center;
display: grid;
grid-template-columns: 100%;
grid-template-rows: repeat(3, 33.33%);
}
.menu-items {
width: 100%;
height: 100vh;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50% 50%;
grid-template-areas: "item1 item2" "item3 item4";
}
.menu__item {
height: 100%;
background: #212528;
border: 1px solid #333;
display: flex;
justify-content: center;
align-items: center;
}
.menu__item--1 {
grid-area: item1;
}
.menu__item--2 {
grid-area: item2;
}
.menu__item--3 {
grid-area: item3;
}
.menu__item--4 {
grid-area: item3;
}
.menu__item--5 {
grid-area: item3;
}
.menu__item--6 {
grid-area: item4;
}
.menu__item--3,
.menu__item--4,
.menu__item--5 {
display: block;
}
.menu-item-inner {
align-items: center;
}
.mainmenu {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mainmenu {
counter-reset: menuitem;
}
.mainmenu__item {
text-transform: lowercase;
overflow: visible;
margin: 0.5rem 0;
padding: 0 0.5rem;
position: relative;
transition: color 0.3s;
}
.mainmenu__item:hover {
color: cyan;
}
.mainmenu__item:hover::after {
opacity: 1;
transform: scale3d(1, 1, 1);
}
ul.menu-items {
margin: 0;
padding: 0;
}
.mainmenu__item {
position: relative;
overflow: hidden;
transition: color 0.1s;
margin: 0.25rem 0;
display: block;
color: #fff;
font-size: 32px;
font-weight: 800;
}
<ul class="menu-items">
<li class="menu__item menu__item--1">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 1
</div>
</div>
</li>
<li class="menu__item menu__item--2">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 2
</div>
</div>
</li>
<li class="menu__item menu__item--3">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 3
</div>
</div>
</li>
<li class="menu__item menu__item--4">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 4
</div>
</div>
</li>
<li class="menu__item menu__item--5">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 5
</div>
</div>
</li>
<li class="menu__item menu__item--6">
<div class="menu-item-inner">
<div class="mainmenu">
Menu 6
</div>
</div>
</li>
</ul>
CODPEN
Can anyone please guide me achieving this layout using CSS-Grid without nesting
(Changing the visual order without changing the logical order of the
document)

You can use grid-template-areas if you want complex layout:
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content:center;
height: 100vh;
min-height: 600px;
}
.box {
display: flex;
align-items: center;
justify-content:center;
border: 1px solid #333;
background: #444;
color: #f9f9f9;
font-size: 2rem;
font-family: Open-sans, Arial, sans-serif;
}
.container {
width: 800px;
height: 100%;
display: grid;
padding: .5rem;
grid-gap: .5rem;
/* This is where Grid is defined*/
grid-template-areas:
'box-1 box-1 box-2 box-2'
'box-1 box-1 box-2 box-2'
'box-3 box-5 box-6 box-6'
'box-4 box-5 box-6 box-6';
}
.box-1 {
grid-area: box-1;
}
.box-2 {
grid-area: box-2;
}
.box-3 {
grid-area: box-3;
}
.box-4 {
grid-area: box-4;
}
.box-5 {
grid-area: box-5;
}
.box-6 {
grid-area: box-6;
}
<div class="container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
<div class="box box-6">6</div>
</div>