Here is the code. I think it's a silly error, but I can't see it -grr. I've tried many times.
The media query grid-template-areas in my code is
". title title ."
". img-1-title img-2-title ."
". img-1 img-2 ."
". img-3-title img-4-title ."
". img-3 img-4 ."
but it shows this template in my browser
"img-1 title title img-2"
"img-3 img-1-title img-2-title img-4"
". img-3-title img-4-title ."
html
<section>
<div class="grid">
<div class="title">Here is a couple of side projects</div>
<div class="img-1-title">A chat app build with socket.io and node.js</div>
<div class="arrow-1"><i class="fas fa-arrow-down"></i></div>
<div class="img-1"></div>
<div class="img-2-title">A responsive mock template of a company build with html css and flexboxgrid</div>
<div class="arrow-2"><i class="fas fa-arrow-down"></i></div>
<div class="img-2"></div>
<div class="img-3-title">Wikipedia search bar connected to the wikipedia API</div>
<div class="arrow-3"><i class="fas fa-arrow-down"></i></div>
<div class="img-3"></div>
<div class="img-4-title">Vanilla js calculator</div>
<div class="arrow-4"><i class="fas fa-arrow-down"></i></div>
<div class="img-4"></div>
</div>
</section>
The reason I redeclare my grid-area is because there is a yellow error in my console if I dont. It works, but I don't like the error, so yea.
css
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"title"
"img-1-title"
"arrow-1"
"img-1"
"img-2-title"
"arrow-2"
"img-2"
"img-3-title"
"arrow-3"
"img-3"
"img-4-title"
"arrow-4"
"img-4";
background: rgb(27, 27, 27);
}
.title {
grid-area: title;
padding: 20px 0;
font-family: Verdana, Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-weight: 900;
color: white;
}
.img-1 {
grid-area: img-1;
background: url("../postimg/chat_app.png") center/cover;
height: 300px;
}
.img-2 {
grid-area: img-2;
background: url("../postimg/Web_template.png") center/cover;
height: 300px;
}
.img-3 {
grid-area: img-3;
background: url("../postimg/Wiki_viewer.png") center/cover;
height: 300px;
}
.img-4 {
grid-area: img-4;
background: url("../postimg/js_calculator.png") center/cover;
height: 300px;
}
.img-1-title {
grid-area: img-1-title;
}
.img-2-title {
grid-area: img-2-title;
}
.img-3-title {
grid-area: img-3-title;
}
.img-4-title {
grid-area: img-4-title;
}
.img-1-title, .img-2-title, .img-3-title, .img-4-title {
display: flex;
height: 80px;
padding: 8px;
justify-content: center;
align-items: center;
font-weight: 200;
font-family: Verdana, Tahoma, sans-serif;
font-style: italic;
color: white;
border-top: 3px solid rgb(15, 177, 15);
}
.arrow-1 {
grid-area: arrow-1;
}
.arrow-2 {
grid-area: arrow-2;
}
.arrow-3 {
grid-area: arrow-3;
}
.arrow-4 {
grid-area: arrow-4;
}
.arrow-1, .arrow-2, .arrow-3, .arrow-4 {
display: flex;
padding: 15px;
height: 25px;
justify-content: center;
font-size: 20px;
}
.fas {
color: white;
}
#media only screen and (min-width: 1000px) {
.grid {
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-areas:
". title title ."
". img-1-title img-2-title ."
". img-1 img-2 ."
". img-3-title img-4-title ."
". img-3 img-4 .";
background: rgb(27, 27, 27);
}
.title {
grid-area: title;
}
.img-1 {
grid-area: img-1;
}
.img-2 {
grid-area: img-2;
}
.img-3 {
grid-area: img-3;
}
.img-4 {
grid-area: img-4;
}
.img-1-title {
grid-area: img-1-title;
}
.img-2-title {
grid-area: img-2-title;
}
.img-3-title {
grid-area: img-3-title;
}
.img-4-title {
grid-area: img-4-title;
}
div.arrow-1, div.arrow-2, div.arrow-3, div.arrow-4 {
display: none;
}
}
Maybe it is just me but everything seems fine to me.
It is changing the media query at 1000px.
The only thing I would change is to use a grid-gap in order for the images to not clump together. This will improve the look on smaller devices by a lot.
.grid {
grid-gap: 20px;
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "title" "img-1-title" "arrow-1" "img-1" "img-2-title" "arrow-2" "img-2" "img-3-title" "arrow-3" "img-3" "img-4-title" "arrow-4" "img-4";
background: rgb(27, 27, 27);
}
.title {
grid-area: title;
padding: 20px 0;
font-family: Verdana, Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-weight: 900;
color: white;
}
.img-1 {
grid-area: img-1;
background: url("http://placekitten.com/1500/650") center/cover;
height: 300px;
}
.img-2 {
grid-area: img-2;
background: url("http://placekitten.com/1500/500") center/cover;
height: 300px;
}
.img-3 {
grid-area: img-3;
background: url("http://placekitten.com/2500/500") center/cover;
height: 300px;
}
.img-4 {
grid-area: img-4;
background: url("http://placekitten.com/1500/600") center/cover;
height: 300px;
}
.img-1-title {
grid-area: img-1-title;
}
.img-2-title {
grid-area: img-2-title;
}
.img-3-title {
grid-area: img-3-title;
}
.img-4-title {
grid-area: img-4-title;
}
.img-1-title,
.img-2-title,
.img-3-title,
.img-4-title {
display: flex;
height: 80px;
padding: 8px;
justify-content: center;
align-items: center;
font-weight: 200;
font-family: Verdana, Tahoma, sans-serif;
font-style: italic;
color: white;
border-top: 3px solid rgb(15, 177, 15);
}
.arrow-1 {
grid-area: arrow-1;
}
.arrow-2 {
grid-area: arrow-2;
}
.arrow-3 {
grid-area: arrow-3;
}
.arrow-4 {
grid-area: arrow-4;
}
.arrow-1,
.arrow-2,
.arrow-3,
.arrow-4 {
display: flex;
padding: 15px;
height: 25px;
justify-content: center;
font-size: 20px;
}
.fas {
color: white;
}
#media only screen and (min-width: 1000px) {
.grid {
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-areas: ". title title ." ". img-1-title img-2-title ." ". img-1 img-2 ." ". img-3-title img-4-title ." ". img-3 img-4 .";
background: rgb(27, 27, 27);
}
.title {
grid-area: title;
}
.img-1 {
grid-area: img-1;
}
.img-2 {
grid-area: img-2;
}
.img-3 {
grid-area: img-3;
}
.img-4 {
grid-area: img-4;
}
.img-1-title {
grid-area: img-1-title;
}
.img-2-title {
grid-area: img-2-title;
}
.img-3-title {
grid-area: img-3-title;
}
.img-4-title {
grid-area: img-4-title;
}
div.arrow-1,
div.arrow-2,
div.arrow-3,
div.arrow-4 {
display: none;
}
}
<section>
<div class="grid">
<div class="title">Here is a couple of side projects</div>
<div class="img-1-title">A chat app build with socket.io and node.js</div>
<div class="arrow-1"><i class="fas fa-arrow-down"></i></div>
<div class="img-1"></div>
<div class="img-2-title">A responsive mock template of a company build with html css and flexboxgrid</div>
<div class="arrow-2"><i class="fas fa-arrow-down"></i></div>
<div class="img-2"></div>
<div class="img-3-title">Wikipedia search bar connected to the wikipedia API</div>
<div class="arrow-3"><i class="fas fa-arrow-down"></i></div>
<div class="img-3"></div>
<div class="img-4-title">Vanilla js calculator</div>
<div class="arrow-4"><i class="fas fa-arrow-down"></i></div>
<div class="img-4"></div>
</div>
</section>
I am sry if I misunderstood your question :D
The problem might be your browser since you already had problems there.
The reason I redeclare my grid-area is because there is a yellow error in my console if I dont. It works, but I don't like the error, so yea.
Firefox seems to work fine so you could try to use it. They also have this nice grid-view which shows you the css grid.
For reference my version of firefox is Firefox Quantum 61.0.1 (64-Bit)
Since you are using Chrome I also looked at the problem in Chrome and the files also worked fine on my Chrome version Version 68.0.3440.75 (official build) (64-Bit)
You should probably check your version of chrome and compare it with the list of supported browser.
If you don't know how to check your browser version here is a small guide for most modern web browser. [LINK]
OMG, I found my problem, I had <a> tags before my divs that was messing up the grid, I don't know why I didn't include them in my HTML, I presumed it wasn't the problem, - smacks forehead.
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'm wanting to stretch out the grid to look like the second image attached in the imgur below (sorry I can't post directly on I don't have enough points to post the image directly)
My code:
.container {
display: grid;
grid-template-columns: 0.5fr 2.4fr 1.3fr 1fr;
grid-template-rows: 1fr 1fr 1fr [F] 1fr;
/* gap: 1px 0px; */
grid-auto-flow: row;
grid-template-areas:
"One oneTitle oneDescrip Picture"
"Two twoTitle twoDescrip Picture"
"Three threeTitle threeDescrip Picture"
"Four fourTitle fourDescrip Picture";
}
.One { grid-area: One; }
.Two { grid-area: Two; }
.Three { grid-area: Three; }
.Four { grid-area: Four; }
.oneTitle { grid-area: oneTitle; }
.twoTitle { grid-area: twoTitle; }
.threeTitle { grid-area: threeTitle; }
.fourTitle { grid-area: fourTitle; }
.oneDescrip { grid-area: oneDescrip; }
.twoDescrip { grid-area: twoDescrip; }
.threeDescrip { grid-area: threeDescrip; }
.fourDescrip { grid-area: fourDescrip; }
.Picture { grid-area: Picture; }
.One,.Two,.Three,.Four {
font-size: 60px;
color: lightgray;
}
.oneTitle, .twoTitle, .threeTitle, .fourTitle, .oneDescrip, .twoDescrip, .threeDescrip, .fourDescrip {
/* padding-top: 35px; */
color: black;
padding-right: 30px;
padding-left: 20px;
}
.oneTitle, .twoTitle, .threeTitle, .fourTitle {
font-weight: bold;
padding-top: 17px;
font-size: 25px;
}
<div class="container">
<div class="One">1</div>
<hr>
<div class="Two">2</div>
<div class="Three">3</div>
<div class="Four">4</div>
<div class="oneTitle">Connect your Crowds</div>
<div class="twoTitle">Gamify the Experience</div>
<div class="threeTitle">Engage with Business Growth</div>
<div class="fourTitle">Continuous Interaction</div>
<div class="oneDescrip">Descript</div>
<div class="twoDescrip">Descript</div>
<div class="threeDescrip">whehwehahha</div>
<div class="fourDescrip">Descriptjwsenwejwje</div>
<div class="Picture"><img id="block3img" src="https://i.imgur.com/PEbCBjt.png")></div>
</div>
What it looks like:
What I want it to look like:
In the .container rule set make this declaration. width: 100%;
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;
}
}
I've got some problems when I'am trying to make my section with Grid layout. Where exactly I make mistake? Can someone explaine me, please?
HTML
<body>
<header>
<div class="grid-wrapper">
<div class="item1"><span>Item 1</span></div>
<div class="item2"><span>Item 2</span></div>
<div class="item3"><span>Item 3</span></div>
<div class="item4"><span>Item 4</span></div>
<div class="item5"><span>Item 5</span></div>
</div>
</header>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #969d9f;
}
header {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #969d9f;
}
.grid-wrapper {
border: 1px solid red;
width: 1200px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(2, 1fr);
}
.item1, .item2, .item3, .item4, .item5 {
border: 1px solid grey;
background-color: #636564;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 40px;
}
.item1 { width: 750px; }
.item2 { width: 360px; }
.item3 { width: 555px; }
.item4 { width: 555px; }
.item5 { width: 1200px; }
So the main question is how can I correctly display my blocks and where is my main mistake that I make?
Here is some pics:
Thank you for your attention!
its my opinion
HTML
<body>
<header>
<div class="grid-wrapper">
<div class="item1"><span>Item 1</span></div>
<div class="item2"><span>Item 2</span></div>
<div class="item3"><span>Item 3</span></div>
<div class="item4"><span>Item 4</span></div>
<div class="item5"><span>Item 5</span></div>
</div>
</header>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #969d9f;
}
header {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background-color: #969d9f;
}
.grid-wrapper {
border: 1px solid red;
width: 1200px;
display: grid;
grid-gap: 20px;
grid-template-areas: "item1 item1 item2" /* make grid area */
"item3 item4 item4"
"item5 item5 item5";
grid-template-columns:(1fr, 1fr, 1fr); /* set width of colums */
}
.item1, .item2, .item3, .item4, .item5 {
border: 1px solid grey;
background-color: #636564;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 40px;
}
.item1 {grid-area: item1} /* connect items with grid area */
.item2 {grid-area: item2}
.item3 {grid-area: item3}
.item4 {grid-area: item4}
.item5 {grid-area: item5}
Your layout isn't a "normal" grid (your rows 1 & 2 have cells with different widths from each other), so to resolve it, a solution could be to create more columns (3/4/5 columns: it depends by cells width and if the biggests [1&4] are equals or not) and play, for example, with grid-template-areas to create items that can... "fill more than 1 cell": in background there is a grid, but with this "trick" you can transform it as your layout.
This is a useful guide for more informations about CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/
Another solution is to use flexbox also for those rows :-)
Try it:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #969d9f;
}
header {
width: 100%;
/*height: 100vh;*/
display: flex;
justify-content: center;
background-color: #969d9f;
}
.grid-wrapper {
border: 1px solid red;
width: 100%;
max-width:1200px;
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"item1 item1 item1 item2"
"item3 item4 item4 item4"
"item5 item5 item5 item5";
}
.item1, .item2, .item3, .item4, .item5 {
border: 1px solid grey;
background-color: #636564;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 40px;
}
/*.item1 { width: 750px; }
.item2 { width: 360px; }
.item3 { width: 555px; }
.item4 { width: 555px; }
.item5 { width: 1200px; }*/
.item1 {
grid-area: item1;
}
.item2 {
grid-area: item2;
}
.item3 {
grid-area: item3;
}
.item4 {
grid-area: item4;
}
.item5 {
grid-area: item5;
}
<header>
<div class="grid-wrapper">
<div class="item1"><span>Item 1</span></div>
<div class="item2"><span>Item 2</span></div>
<div class="item3"><span>Item 3</span></div>
<div class="item4"><span>Item 4</span></div>
<div class="item5"><span>Item 5</span></div>
</div>
</header>
P.S. Maybe it is better don't use a fixed widths in a world of mobile device, so I changed your witdh:1200px with a max-width:1200px, but well you can change it
if you do not care about it ;-)
My grid:
.grid {
display: grid;
grid-template-columns: 370px 1fr 1fr 1fr 370px;
grid-template-areas:
". title title title ."
". about about about ."
". sidebar content content ."
". footer footer footer. ";
}
My about column:
.about {
grid-area: about;
padding-top: 50px;
padding-bottom: 50px;
background-color: #EBEBEB;
}
I want to make it so that #EBEBEB is the background color for the entire . about about about . row. So, how do I make those 370px parts also grey?
You can specify grid-column-start and grid-column-end to control which sections are coloured. Assuming you're asking how you can make the entire row that holds the .about class grey, you're looking for 1 and 6 respectively:
.about {
grid-column-start: 1;
grid-column-end: 6;
}
This can be seen in the following:
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
.bg-img {
opacity: 0.95;
background-image: linear-gradient( rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27)), url(http://i.pi.gy/5mWAw.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.centered {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-family: 'Lato', sans-serif;
color: white;
font-weight: 600;
font-size: 100px;
}
h2 {
font-family: 'Lato', sans-serif;
color: black;
font-size: 40px;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 370px 1fr 1fr 1fr 370px;
grid-template-areas: ". title title title ." ". about about about ." ". sidebar content content ." ". footer footer footer. ";
}
.title {
grid-area: title;
padding-top: 50px;
padding-bottom: 50px;
background-color: #FFFFFF;
}
.about {
grid-area: about;
padding-top: 50px;
padding-bottom: 50px;
background-color: #EBEBEB;
grid-column-start: 1;
grid-column-end: 6;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
<div class="bg-img">
<h1 class="centered">Hi, I'm Karlo,<br>a Web Developer.</h1>
</div>
<div class="grid">
<div class="title">
<h2>My skills</h2>
</div>
<div class="about">
<h2>About Me</h2>
</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content
<p>A</p>
<p>B</p>
</div>
<div class="footer">Footer</div>
</div>
And I've also created a new pen showcasing this here.
Hope this helps! :)