I am using grids for admin dashboard. The design I am trying is there will be two column on header where on the left there will be a logo and the right one will be responsible for something like menu bar. The second row will be of sidebar and main body. The last row will be the footer but on the left it should have setting or logout button which should be fixed. I tried but i could not divide the header and footer into two column.
here is what I am trying to do. I hope it will be clear what i am trying to say
.dashboard {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr;
height: 100vh;
}
header {
background: blue;
grid-column: 1/-1;
grid-row: 1;
}
aside {
background-color: #00152b;
grid-row:2/3;
grid-column:1;
width: 200px;
}
main {
background: #acacd71c;
grid-row: 2;
grid-column: 2;
}
footer {
grid-row: 4;
grid-column:2;
}
.fixed-logout-btn {
position: absolute;
bottom: 0;
background: blue;
display: flex;
width: 180px;
}
<div class="dashboard">
<header>
<div class="left">
logo
</div>
<div class="right">
menu bar
</div>
</header>
<aside>
<p>aside</p>
<div class="fixed-logout-btn">
<p>logout</p>
</div>
</aside>
<main>
<p>main</p>
</main>
<footer>
<p>copyright</p>
</footer>
</div>
This is the expected one
Maybe this works for you. I don't think you were containing your menu bar correctly the .right class.
.dashboard {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: auto 1fr;
height: 100vh;
}
header {
background: blue;
grid-column: 1/-1;
grid-row: 1;
}
aside {
background-color: #00152b;
color: grey;
grid-row:2/3;
grid-column:1;
width: 200px;
}
main {
background: #acacd71c;
grid-row: 2;
grid-column: 2;
}
footer {
grid-row: 4;
grid-column:2;
}
.fixed-logout-btn {
position: absolute;
bottom: 0;
background: yellow;
display: flex;
width: 200px;
}
.right {
grid-row: 1;
grid-column: 2;
background-color: red;
}
<div class="dashboard">
<header>
<div class="left">
logo
</div>
</header>
<div class="right">
menu bar
</div>
<aside>
<p>aside</p>
<div class="fixed-logout-btn">
<p>logout</p>
</div>
</aside>
<main>
<p>main</p>
</main>
<footer>
<p>copyright</p>
</footer>
</div>
Related
I'm trying to make the logo take full width instead of leaving a white background around it.
body {
text-transform: capitalize;
margin: 0;
}
.page {
background-image: url(./hero-bg.jpg);
display: grid;
height: 100vh;
grid-template-columns: 10% auto;
grid-template-rows: 15% auto auto auto;
grid-template-areas: "logo header header header" "sidebar section section section" "sidebar main main main " "sidebar footer footer footer";
}
.logo {
grid-area: logo;
background-color: rgba(255, 0, 0, 0.55);
}
<div class="page">
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>policy</li>
<li>contact</li>
</ul>
</nav>
<h1 class="logo">Batoot</h1>
<aside>sidebar</aside>
<section>section</section>
<main>main content</main>
<footer>footer</footer>
</div>
I tried changing the grid template area property but it did not solve my problem
I would just set the columns and rows where you want stuff and dispense with the areas if I were to do this.
I added some borders and background colors just to illustrate where things are.
body {
text-transform: capitalize;
margin: 0;
background-color: #FFFF3344;
padding-top: 0;
border: solid green 1px;
}
nav {
display: none;
}
.page {
background-color: #0000FF0C;
border: solid 1px cyan;
background-image: url(./hero-bg.jpg);
display: grid;
grid-template-columns: 10% 1fr;
grid-template-rows: auto 1fr 1fr 1fr;
}
.logo {
grid-area: logo;
grid-column: 1 / 3;
grid-row: 1 / 1;
background-color: rgba(255, 0, 0, 0.55);
border: solid 2px lime;
/* deal with using h1 not a div by setting margin and padding */
margin: 0;
padding: 0;
}
section {
grid-column: 2;
grid-row: 2;
}
main {
grid-column: 2;
grid-row: 3;
}
aside {
grid-column: 1;
grid-row: 2 / 5;
border: solid blue 1px;
}
footer {
grid-column: 2 / 3;
}
<div class="page">
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>policy</li>
<li>contact</li>
</ul>
</nav>
<h1 class="logo">Batoot</h1>
<aside>sidebar</aside>
<section>section</section>
<main>main content</main>
<footer>footer</footer>
</div>
Try to make this:
Article and Aside are the same width
I don't know if the floating is wrong, or other. even I make the margin to 0, the Article box will drop below to Aside. And I don't why after I float the box, some of the borderlines will overlap but the footer won't. And there are some requirements.
The border is 3px.
The height of each box is 200px. Article and Aside are the same width
header,main,aside,article,footer{
background-color: lightblue;
border: 3px solid red;
height: 200px;
margin: 0;
}
header {
}
main {
width: 60%;
float: left;
}
aside{
width: 20%;
float: left;
}
article {
width: 20%;
float: right;
}
footer{
clear: both;
}
<header>
<h2>Header</h2>
</header >
<main>
<h2>Main</h2>
</main>
<aside>
<h2>Aside</h2>
</aside>
<article>
<h2>Article</h2>
</article>
<footer>
<h2>Footer</h2>
</footer>
A way is using grid:
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}
.container div {
background-color: green;
border: solid red 1px;
}
.header {
grid-column: 1 / 6;
}
.main {
grid-column: 1 / 4;
}
.asid {
grid-column: 4 / 5;
}
.article {
grid-column: 5 / 6;
}
.footer {
grid-column: 1 / 6;
}
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="asid">asid</div>
<div class="article">article</div>
<div class="footer">footer</div>
</div>
I would wrap the .main, .aside, .article blocks with a flex container.
.content {
display: flex;
gap: 10px;
}
.content {
display: flex;
gap: 10px;
}
.header,.main,.aside,.article,.footer{
background-color: lightblue;
border: 3px solid red;
height: 200px;
margin: 1em;
}
.main {
width: 60%;
}
.aside {
width: 20%;
}
.article {
width: 20%;
}
<div class="container">
<div class="header">HEADER</div>
<div class="content">
<div class="main">MAIN</div>
<div class="aside">ASIDE</div>
<div class="article">ARTICLE</div>
</div>
<div class="footer">FOOTER</div>
</div>
Try using flex
section{
display: flex;
}
main, aside, article{
height: 60px;
}
main{
flex-grow: 3;
background: red;
}
aside{
flex-grow: 1;
background: green;
}
article{
flex-grow: 1;
background: blue;
}
<section>
<main>main</main>
<aside>aside</aside>
<article>article</article>
</section>
MCVE
I would like to nest a grid within another grid, and have a tall content box within the nested grid's content div. However no matter I set the overflow property of this content div to scroll, the content box grows causing the outer grid to exceed the viewport. So the viewport gets a scrollbar. The scrollbar of the content div is present but disabled.
// html
<div class="outergrid">
<div class="row1">
Outer Grid Header
</div>
<div class="row2">
<div class="header">
Inner Grid Header
</div>
<div class="box">
Tall Box
</div>
</div>
</div>
// style scss
*{
padding: 0px;
margin: 0px;
}
.outergrid {
display: grid;
grid-template-rows: 50px 100%;
grid-gap: 10px;
background-color: #0ff;
div {
background-color: #afa;
}
}
.row1{
grid-row: 1;
}
.row2{
grid-row: 2;
display: grid;
grid-template-rows: 50px 100%;
grid-gap: 5px;
.header {
grid-row: 1;
background-color: #ffa;
}
.contentbox {
grid-row: 2;
overflow: scroll;
.tallcontent {
background-color: #89f;
height: 1000px;
}
}
}
screenshot highlighting the problem
If I understood you correctly, then perhaps this solution (pure CSS, without SCSS) below can help you. The solution is to enforce a constraint on the height of the parent elements.
* {
padding: 0px;
margin: 0px;
}
.outergrid {
--grid-gap: 10px;
display: grid;
grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
grid-gap: var(--grid-gap);
background-color: #0ff;
max-height: 100vh;
}
.outergrid div {
background-color: #afa;
}
.row1 {
grid-row: 1;
}
.row2 {
--grid-gap: 5px;
grid-row: 2;
display: grid;
max-height: 100%;
grid-template-rows: 50px calc(100% - 50px - var(--grid-gap));
grid-gap: var(--grid-gap);
}
.row2 .header {
grid-row: 1;
background-color: #ffa;
}
.row2 .contentbox {
grid-row: 2;
overflow: scroll;
}
.row2 .contentbox .tallcontent {
background-color: #89f;
height: 1000px;
}
<div class="outergrid">
<div class="row1">
Outer Grid Header
</div>
<div class="row2">
<div class="header">
Inner Grid Header
</div>
<div class="contentbox">
<div class="tallcontent">
Tall Content
</div>
</div>
</div>
</div>
I'm trying to create a layout using the Flex structure. This is exactly the main image I wanted it to be.
This layout will also be compatible with the mobile view.
1- My Sidebar component doesn't stick to the bottom of my hero component. I used "margin-top: -200px;" for this problem. but I don't want that.
2- Between my components, I want to use margin as pictured. But because I calculate the size of each component as a percentage of "%" and they completely cover the page, if I give margin, they become wrap. What's the right way for me to do this ?
3- Do you think the flexbox settings I have applied are correct ? What would be better for me to change ?
Thank you in advance for your help.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #59D4EB;
text-align: center;
height: 80px;
}
/* Main Container */
.container {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
/* Container */
.container-main {
display: flex;
flex-wrap: wrap;
}
/* Items */
.hero {
flex: 1 0 40%;
height: 400px;
background-color: #D5C9E2;
}
.main-content {
flex: 1 0 60%;
height: 600px;
background-color: #F5C546;
}
.sidebar {
height: 500px;
flex: 1 0 40%;
background-color: #A0C263;
/* I DONT WANT USE THİS MARGİN-TOP */
margin-top: -200px;
}
.extra-content {
flex: 1 0 60%;
background-color: #898989;
height: 300px;
}
/* Container */
.images-posts-cont {
display: flex;
height: 150px;
}
/* Items */
.images {
flex: 1 0 70%;
background-color: #53B774;
}
.posts {
flex: 1 0 30%;
background-color: #F3CDDD;
}
/* Footer */
.footer {
text-align: center;
height: 80px;
background-color: #F4A540;
}
#media screen and (max-width:599px) {
.hero {
flex: 1 0 100%;
order: 1;
}
.sidebar {
flex: 1 0 100%;
order: 2;
}
.main-content {
order: 3;
}
.extra-content {
order: 4;
}
}
;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="src/css/test.css">
<title> Flexbox Layout</title>
</head>
<body>
<!-- FlexBox Layout -->
<header class="header">
<h2>header</h2>
</header>
<div class="container">
<section class="container-main">
<div class="hero">
<h2>hero</h2>
</div>
<div class="main-content">
<h2>main-content</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>
<div class="extra-content">
<h2>extra content</h2>
</div>
</section>
<section class="images-posts-cont">
<div class="images">
<h2>related images</h2>
</div>
<div class="posts">
<h2>related posts</h2>
</div>
</section>
<footer class="footer">
<h2>footer</h2>
</footer>
</div>
</body>
</html>
I think you can still use flex. Just you have to wrap both components left and right with div.
left = > hero and side nav
right = > main content and extra content
I just add 2 div. Look below the code.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
background-color: #59D4EB;
text-align: center;
height: 80px;
}
/* Main Container */
.container {
display: flex;
flex-flow: column nowrap;
text-align: center;
}
/* Container */
.container-main {
display: flex;
flex-wrap: wrap;
}
/* Items */
.left{
width: 40%;
}
.right {
width: 60%;
}
.hero {
height: 400px;
background-color: #D5C9E2;
}
.main-content {
flex: 1 0 60%;
height: 600px;
background-color: #F5C546;
}
.sidebar {
height: 500px;
flex: 1 0 40%;
background-color: #A0C263;
/* I DONT WANT USE THİS MARGİN-TOP */
}
.extra-content {
flex: 1 0 60%;
background-color: #898989;
height: 300px;
}
/* Container */
.images-posts-cont {
display: flex;
height: 150px;
}
/* Items */
.images {
flex: 1 0 70%;
background-color: #53B774;
}
.posts {
flex: 1 0 30%;
background-color: #F3CDDD;
}
/* Footer */
.footer {
text-align: center;
height: 80px;
background-color: #F4A540;
}
#media screen and (max-width:599px) {
.hero {
flex: 1 0 100%;
order: 1;
}
.sidebar {
flex: 1 0 100%;
order: 2;
}
.main-content {
order: 3;
}
.extra-content {
order: 4;
}
}
<body>
<!-- FlexBox Layout -->
<header class="header">
<h2>header</h2>
</header>
<div class="container">
<section class="container-main">
<div class="left">
<div class="hero">
<h2>hero</h2>
</div>
<div class="sidebar">
<h2>sidebar</h2>
</div>
</div>
<div class="right">
<div class="main-content">
<h2>main-content</h2>
</div>
<div class="extra-content">
<h2>extra content</h2>
</div>
</div>
</section>
<section class="images-posts-cont">
<div class="images">
<h2>related images</h2>
</div>
<div class="posts">
<h2>related posts</h2>
</div>
</section>
<footer class="footer">
<h2>footer</h2>
</footer>
</div>
</body>
There can be 2 grids here , one with the header the contents and the footer, and then another grid inside the content area.
Here is a possibility to start from for such a layout with grid where a break point can turn the second grid into a flex column layout with a mediaquerie (set at 500px for the demo):
body {
/* first grid of 3 rows , flex can do it too */
min-height: 100vh;
margin: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
body main {
/* second grid for the contents in between header and footer */
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 5px 0;
grid-gap: 5px;
}
header {
background: #74d3e8;
}
/* set each element inside cell(s) of the grid */
.main {
grid-row: 1 / span 2;
grid-column: 2 / span 2;
background: #f0c354;
}
.hero {
grid-column: 1;
grid-row: 1;
background: #d4cbe0;
}
.sidebar {
grid-column: 1;
grid-row: 2 / span 2;
background: #a7be6d;
}
.extra {
grid-column: 2 / span 2;
grid-row: 3;
background: #898989;
}
.relI {
grid-column: 1 / span 2;
grid-row: 4;
background: #58b076;
}
.relP {
grid-column: 3;
grid-row: 4;
background: #edd0de;
}
footer {
background: #f4a540;
}
/* set here your break point */
#media screen and (max-width: 500px) {
body main {
display: flex;
flex-flow: column;
}
.main {
flex: 1;
}
/* from you can use order to reset order of the boxes in main */
}
<header>header</header>
<main>
<article class="main">Main content</article>
<section class="hero">hero</section>
<aside class="sidebar">Sidebar</aside>
<section class="extra">Extra content</section>
<aside class="relI">Related images</aside>
<aside class="relP">Related post</aside>
</main>
<footer>Footer</footer>
Usefull ressource to go further : https://gridbyexample.com/ */ https://css-tricks.com/snippets/css/complete-guide-grid/
here is a demo to play with : https://codepen.io/gc-nomade/pen/jObgNOO
I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
position: sticky;
top: 0;
left: 0;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
<main>
<nav></nav>
<section>
hi
</section>
<article>
<p>hi</p>
</article>
</main>
the problem you are facing here is, that your section block consumes the full height. so it won't stick, since it is too large to do so. you would need to put a child element inside your section and give that your sticky attributes, to make it work. based on your example, i simply wrapped your 'hi' inside a div.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
}
section div {
position: sticky;
top: 0;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
<main>
<nav></nav>
<section>
<div>
<p>one</p>
</div>
</section>
<article>
<p>two</p>
</article>
</main>
You need to use align-self: start on the thing you want to be sticky.
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
background: grey;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
position: sticky;
top: 0;
left: 0;
align-self: start;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
<main>
<nav></nav>
<section>
hi
</section>
<article>
<p>hi</p>
</article>
</main>
Update with complete code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
main {
display: grid;
grid-template-columns: 20% 55% 25%;
grid-template-rows: 55px 1fr;
}
nav {
background: blue;
grid-row: 1;
grid-column: 1 / 4;
}
section {
background: grey;
grid-column: 1 / 2;
grid-row: 2;
top: 0;
left: 0;
}
.fixed-section {
position: fixed;
z-index: 1;
overflow-x: hidden;
}
article {
background: yellow;
grid-column: 2 / 4;
}
article p {
padding-bottom: 1500px;
}
</style>
</head>
<body>
<main>
<nav></nav>
<section>
<div class='fixed-section'>
Hi 1
<div>
</section>
<article>
<p>hi</p>
</article>
</main>
</body>
</html>