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;
}
}
Related
I have started using Grid CSS and i am stuck in building a Layout using Grid system.
I am looking to build a layout where the column would overlap a row and take full height. I have attached a screenshot of the layout and what i have tried so far.
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-areas:
"header header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
}
.overlay {
background-color: red;
z-index: 10;
grid-column: content-start / content-end;
grid-row: header-start / content-end;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="overlay">Content</div>
</div>
Depending on how you want to overlap the following code works, but need to be adapted:
There's a lot of other way to do this...
body {
margin: 40px;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.header {
grid-area: header;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px 120px 120px;
grid-template-rows: 30px 30px auto auto;
grid-template-areas:
"header header header"
"sidebar content content";
background-color: #fff;
color: #444;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.header {
background-color: #999;
grid-row: 1 / 3;
}
.sidebar {
background-color: red;
z-index: 10;
grid-row: 2 / 4;
height: 300px;
}
.overlay {
background-color: red;
z-index: 10;
grid-column: content-start / content-end;
grid-row: 3 / 4;
}
<div class="wrapper">
<div class="box header">Header</div>
<div class="box sidebar">Sidebar</div>
<div class="overlay">Content</div>
</div>
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 thought that when I type . (blank field) inside grid-template-areas property, .item5 will show inside under field. However it showing inside . field. Why does it works like that?
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
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">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
From the specification:
A sequence of one or more "." (U+002E FULL STOP), representing a null cell token.
and
A null cell token represents an unnamed area in the grid container.
unnamed area doesn't mean that an item cannot be placed there. It simply mean unnamed and the automatic placement algorithm will start from the top to the bottom so the first empty area for item5 is an unnamed area.
You can follow the full algorithm here: https://www.w3.org/TR/css-grid-1/#auto-placement-algo where you will find no restriction about unnamed area or the named one. If your item5 was alone it will get placed into the first row/column (the one named "header")
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
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="item5">5</div>
</div>
Related question where I am giving a more detailed explanation about the placement algorithm:
CSS Grid : How Auto placement algorithm works
Based on your last comment, I think that you are expecting to have grid-auto-flow: column;, but this is not the default style.
I added it to the snippet:
body {
margin: 0;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: left;
}
.item4 {
grid-area: footer;
}
.grid-container {
grid-auto-flow: column;
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "header header"
"content ."
"left ."
"footer footer"
"under under";
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">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
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>
This is my HTML and CSS. I want a result like the image posted below. I have the number 1 on the top, and 2 on the bottom according to my code, but without changing the HTML, I want to have the result show 2 on the top and 1 on the bottom. I am trying to use CSS grid of bootstrap.
<style>
.grid-container {
grid-template-columns: footer header;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.item1 { grid-area: footer; }
.item2 { grid-area: header; }
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
result -:
but i want the result
HTML should not be changed. I want change in only CSS.
You can achieve this by using flex-wrap:wrap-reverse.
.grid-container {
grid-template-columns: footer header;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
flex-wrap: wrap-reverse;
display: flex;
width:calc(100% - 20px);
}
.item1 {
grid-area: footer;
}
.item2 {
grid-area: header;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
flex-basis: 100%;
}
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
</div>
Remove your grid-container class and add flex-row d-flex this two bootstrap class.
Hope this will solve your problem.
<style>
.grid-container {
grid-template-columns: footer header;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.item1, .item2 {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.block{
background-color: #2196F3;
padding: 10px;
}
</style>
<div class="flex-row d-flex block">
<div class="item1">1</div>
<div class="item1">2</div>
</div>