How can I make a div that overrides all the template areas and goes to the front, so that the item6 will be displaying in front of all the other items.
I tried to with grid-row-start and grid-row-end but it doesn't seem to work
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.item6 { grid-row-start: 0;
grid-row-end: 6}
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
<div class="item6">Override everything</div>
</div>
</body>
</html>
There is no grid-column-start: 0 they all start with 1.
Also you have to specify the grid-columns to be covered.
<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
grid-area: header;
}
.item2 {
grid-area: menu;
}
.item3 {
grid-area: main;
}
.item4 {
grid-area: right;
}
.item5 {
grid-area: footer;
}
.item6 {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: -1
}
.grid-container {
display: grid;
grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
<div class="item6">Override everything</div>
</div>
</body>
</html>
Related
I'm trying to modify grid I using grid from https://www.w3schools.com/ but I tried but it was not working help me to create grid.
i need this grid in below code
this code I copied from w3schools link https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named
code
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>This grid layout contains six columns and three rows:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
I want it so that all other grids in the grid-area fade to 0.3 opacity, but only those after in the html will fade when one is hovered over. I was wondering if anybody knew how to fix this?
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
margin-left: 12.5%;
display: grid;
width: 75%;
grid-template-areas:
'header header'
'menu right'
'main footer';
grid-gap: 60px;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.5);
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 25px;
background: #ffffff;
transition: 2s;
}
.grid-container > div:hover {
opacity: 1;
padding: 50px;
}
.grid-container > div:hover ~ [class^="item"] {
opacity: 0.3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2" id="item2">menu</div>
<div class="item3" id="item3">main</div>
<div class="item4" id="item4">right</div>
<div class="item5" id="item5">Footer</div>
</div>
</body>
If I understood the question correctly, this should work for you:
.grid-container:hover > div {
opacity: 0.3;
}
.grid-container > div:hover {
opacity: 1;
padding: 50px;
}
I am trying to achieve this, I want the nav and header tags to fill the left side.
html {
width: 100%;
overflow: hidden;
}
body {
display: grid;
grid-template-rows: 1fr 5fr 1fr;
grid-template-columns: 2fr 5fr 3fr;
grid-template-areas:
"header header"
"nav main"
"footer footer";
}
header {
background: yellowgreen;
}
nav {
background: lightblue;
}
main {
background: aliceblue;
}
footer {
background: lightgoldenrodyellow;
}
<header>Banner</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>
You can try like this
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header main main main '
'menu main main main '
'menu footer footer footer ';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.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">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item5">Footer</div>
</div>
Here's an example of how you could define grid-areas
html {
overflow: hidden;
}
body {
display: grid;
grid-template-rows: 25px 100px;
grid-template-columns: 80px 1fr;
grid-template-areas: "header main" "nav main" "nav footer";
}
body>header {
grid-area: header;
background-color: yellowgreen;
}
body>nav {
grid-area: nav;
background-color: lightblue;
}
body>main {
grid-area: main;
background-color: aliceblue;
}
body>footer {
grid-area: footer;
background-color: lightgoldenrodyellow;
}
<header>Banner</header>
<nav>Navigation</nav>
<main>Main content</main>
<footer>Footer</footer>
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;
}
}