How would my code look for the following layout? How do I create multiple nav and headers in HTML?
Simply use grid-template-areas to set your layout:
body {
display: grid;
grid-template-areas:
"headerA headerB headerB headerB headerB"
"headerA navB navB navB navB"
"navA article article article aside"
"footer footer footer footer footer";
}
.header-1 {
grid-area: headerA;
}
.header-2 {
grid-area: headerB;
}
.nav-1 {
grid-area: navA;
}
.nav-2 {
grid-area: navB;
}
.article {
grid-area: article;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
/* for styling puropse only */
body {
grid-gap: 2px;
}
body > div {
display: flex;
justify-content: center;
align-items: center;
min-height: 50px;
box-shadow: 0 0 0 2px lightgrey;
}
.article {
min-height: 102px;
}
<div class="header-1">Header 1</div>
<div class="header-2">Header 2</div>
<div class="nav-1">Navigation Bar 1</div>
<div class="nav-2">Navigation Bar 1</div>
<div class="article">Article</div>
<div class="aside">Aside</div>
<div class="footer">Footer</div>
Related
This question already has answers here:
CSS 100% height with padding/margin
(15 answers)
100% width minus margin and padding [duplicate]
(6 answers)
Closed 1 year ago.
I've got a grid layout. I want to add a 5px margin all around it but doing so adds a scrollbar.
Is it possible to set a margin without having a scrollbar added?
function toggle() {
document.querySelector(".container").classList.toggle("withMargin");
}
html,
body,
.container {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
}
.main {
grid-area: main;
background-color: lightcoral;
}
.logo {
grid-area: logo;
background-color: lightcyan;
}
.header {
grid-area: header;
background-color: lightgoldenrodyellow;
}
.nav-one {
grid-area: nav-one;
background-color: lightgray;
}
.nav-two {
grid-area: nav-two;
background-color: lightgreen;
}
.container.withMargin {
margin: 5px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<div class="main">
<br /><button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>
Use padding instead of margin for selector .container.withMargin:
.container.withMargin {
padding: 5px;
}
And add box-sizing: border-box for the .container selector.
function toggle() {
document.querySelector(".container").classList.toggle("withMargin");
}
html,
body,
.container {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 1fr 1fr;
grid-template-columns: 300px 1fr 1fr;
gap: 5px 5px;
grid-auto-flow: row;
grid-template-areas: "logo header header" "nav-one main main" "nav-two main main";
background-color: black;
box-sizing: border-box;
}
.main {
grid-area: main;
background-color: lightcoral;
}
.logo {
grid-area: logo;
background-color: lightcyan;
}
.header {
grid-area: header;
background-color: lightgoldenrodyellow;
}
.nav-one {
grid-area: nav-one;
background-color: lightgray;
}
.nav-two {
grid-area: nav-two;
background-color: lightgreen;
}
.container.withMargin {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<div class="container">
<div class="main">
<br />
<button onclick="toggle()">toggle .container margin</button>
</div>
<div class="logo">logo</div>
<div class="header">header</div>
<div class="nav-one">nav one</div>
<div class="nav-two">nav two</div>
</div>
</body>
</html>
I want help on how can i create vertical border like in in sample image.
Try to use CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
I wrote this code to show you how would be look grid on your template website
.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'left header header header header right'
'left main main main main right'
'left footer footer footer footer right';
grid-gap: 10px;
background-color: #2196F3;
padding: 7px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 40px 0;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Left</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
I have next grid:
.item1 { grid-area: left; }
.item2 { grid-area: left2; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.grid-container {
display: grid;
grid-template-areas:
'left left main main main right'
'left2 left2 main main main right';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-template-columns: repeat(auto-fill);
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
<div class="grid-container">
<div class="item1">left1</div>
<div class="item2">left2</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
</div>
How to apply for this grid a wrap functionality when the screen becomes small?
EX: when i will resize the screen the blocks should be aligned in a column (one above one).
.item1 { grid-area: left; }
.item2 { grid-area: left2; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.grid-container {
display: grid;
grid-template-areas:
'left left main main main right'
'left2 left2 main main main right';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
grid-template-columns: repeat(auto-fill);
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
#media only screen and (max-width: 600px) {
.grid-container {
display:flex;
flex-direction:column;
}
}
<div class="grid-container">
<div class="item1">left1</div>
<div class="item2">left2</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
</div>
Try to add this part in your code.
#media only screen and (max-width: 600px) {
.grid-container {
display:flex;
flex-direction:column;
}
}
Essentially what I need to happen is to set up a grid, but if one of the elements is missing, another element stretches to fill the space.
This is an example Pen of where I'm currently at:
https://codepen.io/Rockster160/pen/JMLaXY
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
.grid {
height: 100%;
width: 100%;
background: white;
border: 2px solid red;
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100px auto 50px;
grid-template-areas: "sidebar header"
"sidebar content"
"sidebar footer";
}
.sidebar {
grid-area: sidebar;
background: green;
}
.header {
grid-area: header;
background: lightblue;
}
.content {
grid-area: content;
background: blue;
border: 5px solid black;
}
.footer {
grid-area: footer;
background: orange;
}
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<!-- <div class="footer"></div> -->
</div>
footer is an optional element, so when it doesn't exist (commented out as in the code) then content should stretch and line up with the bottom of sidebar.
I've tried a variety of different combinations using min/max content and different auto placements, but no luck. I thought if I had multiple elements named content it might work as well, but no luck there either.
Any help is greatly appreciated!
You are forcing the 3rd row to be 50px in the grid style.
Change it to be adapted to the content, and set the 50px as height in the footer itself:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
.grid {
height: 100%;
width: 100%;
background: white;
border: 2px solid red;
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100px auto max-content; /* changed last 50px to max-content*/
grid-template-areas: "sidebar header"
"sidebar content"
"sidebar footer";
}
.sidebar {
grid-area: sidebar;
background: green;
}
.header {
grid-area: header;
background: lightblue;
}
.content {
grid-area: content;
background: blue;
border: 5px solid black;
}
.footer {
grid-area: footer;
background: orange;
height: 50px; /* added */
}
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<!-- <div class="footer"></div> -->
</div>
And another posibility, thanks to Michael_B. The sintax of grid-template-rows is clearer:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
.grid {
height: 100%;
width: 100%;
background: white;
border: 2px solid red;
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100px 1fr auto;
grid-template-areas: "sidebar header"
"sidebar content"
"sidebar footer";
}
.sidebar {
grid-area: sidebar;
background: green;
}
.header {
grid-area: header;
background: lightblue;
}
.content {
grid-area: content;
background: blue;
border: 5px solid black;
}
.footer {
grid-area: footer;
background: orange;
height: 50px; /* added */
}
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
The easiest way to do this is to use the :last-child selector:
.content:last-child {
grid-row: content / footer;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
.grid {
height: 100%;
width: 100%;
background: white;
border: 2px solid red;
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100px auto 50px;
grid-template-areas: "sidebar header" "sidebar content" "sidebar footer";
margin-bottom: 2rem;
}
.sidebar {
grid-area: sidebar;
background: green;
}
.header {
grid-area: header;
background: lightblue;
}
.content {
grid-area: content;
background: blue;
border: 5px solid black;
}
.content:last-child {
grid-row: content / footer;
}
.footer {
grid-area: footer;
background: orange;
}
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<!-- <div class="footer"></div> -->
</div>
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
Or, alternatively, we could reverse the order of the .content and .footer elements in the HTML (as below) and use the CSS negation operator (:not()) to determine that the .content element should take up extra space if it is not preceded by a .footer element:
:not(.footer) + .content {
grid-row: content/footer;
}
which styles a .content element that is not immediately preceded by a .footer sibling in such a way that it starts in the grid-row identified by content and ends in the grid-row identified by footer:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
div {
box-sizing: border-box;
}
.grid {
height: 100%;
width: 100%;
background: white;
border: 2px solid red;
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100px auto 50px;
grid-template-areas: "sidebar header" "sidebar content" "sidebar footer";
}
.sidebar {
grid-area: sidebar;
background: green;
}
.header {
grid-area: header;
background: lightblue;
}
.content {
grid-area: content;
background: blue;
border: 5px solid black;
}
:not(.footer)+.content {
grid-row: content/footer;
}
.footer {
grid-area: footer;
background: orange;
}
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<!-- <div class="footer"></div> -->
</div>
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
References:
grid-row.
:last-child.
Negation pseudo-class:not().
Sometimes things are simpler with flexbox.
Since your container has a defined height (the viewport), you can use flex-flow: column wrap to create both columns.
Then use flex: 1 on the content item, which tells it to consume free space.
When the footer is present, the content makes space for it. When the footer is not present, the content consumes all space.
.grid {
display: flex;
flex-flow: column wrap;
height: 100vh;
background: white;
border: 2px solid red;
}
.sidebar {
flex: 0 0 100%;
width: 250px;
background: green;
}
.header {
flex: 0 0 100px;
width: calc(100% - 250px);
background: lightblue;
}
.content {
flex: 1;
width: calc(100% - 250px);
border: 5px solid black;
background: blue;
}
.footer {
flex: 0 0 50px;
width: calc(100% - 250px);
background: orange;
}
body { margin: 0; }
div { box-sizing: border-box; }
<!-- WITH FOOTER -->
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
<hr>
<!-- WITHOUT FOOTER -->
<div class="grid">
<div class="sidebar"></div>
<div class="header"></div>
<div class="content"></div>
</div>
Change your .grid class to
.grid {
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: 100px auto 50px;
grid-template-areas:
"sidebar header"
"sidebar content"
"sidebar content";
}
when you comment your footer tag as in your pen, grid is still waiting to have a footer element there, so it's kinda "saving space" for this element there
I'm playing with "grid layout" and I have a "section" with 100% width. This is display: grid.
Inside it there are 4 other divs that I would like to appear on the right side instead of the left side.
Here is my code:
.fullWidth {
display: grid;
grid-template: "it01 it02 it03 it04 it05";
grid-template-rows: 40px;
grid-template-columns: 40px 40px 40px 200px 40px;
background: orange;
}
.item01 {
grid-area: it01;
background: lime;
}
.item02 {
grid-area: it02;
background: blue;
}
.item03 {
grid-area: it03;
background: red;
}
.item04 {
grid-area: it04;
background: yellow;
}
.item05 {
grid-area: it05;
background: tomato;
}
<section class="fullWidth">
<div class="item01"> </div>
<div class="item02"> </div>
<div class="item03"> </div>
<div class="item04"> </div>
<div class="item05"> </div>
</section>
Here's the fiddle:
https://jsfiddle.net/2mpsuc7c/
Just add:
.fullWidth {
justify-content: end;
}
Updated snippet:
.fullWidth {
display: grid;
grid-template: "it01 it02 it03 it04 it05";
grid-template-rows: 40px;
grid-template-columns: 40px 40px 40px 200px 40px;
background: orange;
justify-content: end;
}
.item01 {
grid-area: it01;
background: lime;
}
.item02 {
grid-area: it02;
background: blue;
}
.item03 {
grid-area: it03;
background: red;
}
.item04 {
grid-area: it04;
background: yellow;
}
.item05 {
grid-area: it05;
background: tomato;
}
<section class="fullWidth">
<div class="item01"> </div>
<div class="item02"> </div>
<div class="item03"> </div>
<div class="item04"> </div>
<div class="item05"> </div>
</section>
Updated Fiddle
You can make use of the direction property with direction: rtl:
.fullWidth {
display: grid;
grid-template: "it01 it02 it03 it04 it05";
grid-template-rows: 40px;
grid-template-columns: 40px 40px 40px 200px 40px;
background: orange;
direction: rtl;
}
.item01 {
grid-area: it01;
background: lime;
}
.item02 {
grid-area: it02;
background: blue;
}
.item03 {
grid-area: it03;
background: red;
}
.item04 {
grid-area: it04;
background: yellow;
}
.item05 {
grid-area: it05;
background: tomato;
}
<section class="fullWidth">
<div class="item01"></div>
<div class="item02"></div>
<div class="item03"></div>
<div class="item04"></div>
<div class="item05"></div>
</section>
Hope this helps! :)