Is this the most efficient/responsive method of using CSS Grids? - html

Question

Page Example: https://codepen.io/anthonyhvelazquez/pen/qBBVjBX
The example I posted is a working example of the template I want to have. I have 2 fixed height headers and the rest of the content-container will fill the height of the parent. Anything within the content-container will auto scroll if the child's content is larger than the the content-container. I know there are other functions like minmax, and fit-content and wanted to make sure there isnt a better/more responsive way of setting up the page.
Some other questions I had regarding grids:
If I wanted to have a hidden header that appears and disappears on the click of a button, would it be better using a grid system and trying to animate the grid rows to a height of 0 or would it be better setting up the container as a vertical flex container and modifying the height of the navbars themselves
If I tried to implement this in Angular, would I have to wrap my components in div containers with the grid location style to place them in a grid template properly or can I add the styling to the component itself like so:
<div style="grid-row: 1/2">
<app-component></app-component>
</div>
// or
<app-component style="grid-row: 1/2"></app-component>

Answer 1

The codepen demo is not responsive and to your question. Is it the most responsive method? No, it is not.
With grid system you can make any layout you can think of, but not everywhere you need it.
You can simply use Flex and it will be responsive as well.
I am adding code for a normal web layout. having Header, hero section
content and para and all be responsive. Feel free to go through them and understand them. Feel free to ask anything regarding it. I will help as much I can.
In Angular, you can make components like header, footer and add the respective HTML tags and CSS for the components and imports it in your home page component. Hope this helps.
For two fixed header you can just increse the height of the header in its class. But you have to use js for adding click function and doing the changes in height of that header class.
For the particular example, I had just used flex here.
body, html{
padding: 0px;
margin: 0px ;
box-sizing: border-box;
}
.header{
z-index: 10;
height: 80px;
width: 100%;
position: fixed;
background: linear-gradient( 160deg, #00689b 0%, #00adef 100%);
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.06);
}
.header .logo{
width: 190px;
height: auto;
position: absolute;
top: 54%;
left: 135px;
transform: translate(-50%, -50%);
cursor: pointer;
color: white;
}
.header-links{
display: flex;
flex-direction: row;
float: right;
padding: 9px 20px;
color: white;
font-size: 18px;
}
.header-links span{
padding: 20px;
}
.hero-section{
width: 100%;
height: 80vh;
position: relative;
background-color: turquoise;
top: 80px;
}
.hero-section img{
width: 100%;
height: 80vh;
object-fit: cover;
position: absolute;
}
.hero-section h1{
position: absolute;
text-align: center;
color: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.contents-container{
padding: 5% 5%;
position: relative;
width: 100%;
min-height: 100vh;
}
.h-features-container{
padding-top: 20px;
height: auto;
width: 100%;
position: relative;
background-color: white;
z-index: 1;
}
.h-features-container >h3{
justify-content: center;
text-align: center;
font-size: 28px;
color: #111;
}
.features-card-container{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
margin-top: 10px;
padding: 50px 9%;
box-sizing: border-box;
}
.features-card{
width: 300px;
height: 412px;
background-color: red;
padding: 20px;
margin: 19px;
border-radius: 2px;
background: #fff;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
}
.features-card h3{
text-align: center;
}
.features-card p{
font-size: 16px;
}
/* footer */
.h-footer{
min-height: 50vh;
width: 100%;
position: relative;
bottom: 0px;
padding: 0%;
background: linear-gradient( 90deg, #00689b 0%, #00adef 100%);
}
.h-footer-flex{
display: flex;
flex-direction: row;
flex-wrap: wrap;
color: white;
white-space: nowrap;
padding: 20px 20px;
}
.h-copywrite{
text-align: center;
color: white;
position: relative;
}
.f-box{
height: 60%;
width: 25%;
padding: 20px;
margin: 20px;
}
.f-box p{
position: relative;
}
.f-box>p>a{
cursor: pointer;
}
.f-box-links:before {
content: '';
position: absolute;
background: white;
width: 0px;
height: 1px;
top: 20px;
opacity: .8;
transform: translate(0%, 0%);
transition: all 0.3s ease;
}
.f-box-links:hover:before {
width: 25px;
}
.social-icon-1{
margin-left: -8px;
}
#media screen and (max-width:1200px){
.f-box{
height: 60%;
width: 28%;
padding: 20px;
margin: 20px;
}
}
#media screen and (max-width:999px){
.f-box{
height: 60%;
width: 26%;
padding: 20px;
margin: 20px;
}
}
<header class="header">
<div class="logo">
<h2>Main Logo</h2>
</div>
<div class="header-links">
<span>Products</span>
<span>Features</span>
<span>Contact</span>
</div>
</header>
<div class="hero-section">
<img src="https://source.unsplash.com/random">
<h1>This is a simple heading</h1>
</div>
<div id="features-container" class="h-features-container">
<h3>Our Products</h3>
<div class="features-card-container">
<div class="features-card">
<h3>Inventory Management</h3>
<p>Inventory Management Software enables you to Manage Your assets The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Order Management</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Employee Management</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Payroll Management</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
<div class="features-card">
<h3>Attendence System</h3>
<p>Stock Management Software enables you to Manage Your asstes The way you want you can
arrange your assets in a way that helps you to keep easy track.
</p>
</div>
</div>
</div>
<!-- footer -->
<footer class="footer">
<div class="h-footer">
<div class="h-footer-flex">
<div class=" f-box">
<p> <a class="f-box-links">Home</a></p>
<p> <a class="f-box-links">Features</a></p>
<p><a class="f-box-links">Clients</a></p>
<p><a class="f-box-links">Why Us</a></p>
<p><a class="f-box-links">Contact Us</a></p>
</div>
<div class=" f-box">
<p> <a class="f-box-links">Terms and Condition</a></p>
<p> <a class="f-box-links">Privacy Policy</a></p>
</div>
<div class=" f-box">
<p>Follow us</p>
<p>Facebook</p>
<p>Instagram</p>
</div>
</div>
<p class="h-copywrite">© 2019 website.in All Rights Reserved</p>
</div>
</footer>