Hi I've been trying to do this grind layout but it Grid template areas not working. As by code I want to implement it in two rows with 6 columns
#about-a .about-info {
display: grid;
grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3";
grid-gap: 1.2rem;
}
#about-a .bio-image {
grid-area: bioimage;
}
#about-a .bio {
grid-area: bio;
border: 3px solid #a862ea;
padding: 0.8rem;
}
#about-a .award-1 {
grid-area: aw1;
}
#about-a .award-2 {
grid-area: aw2;
}
#about-a .award-3 {
grid-area: aw3;
}
#about-a .award-1 .fas,
#about-a .award-2 .fas,
#about-a .award-3 .fas {
color: #a862ea;
margin: 1rem;
}
<section id="about-a" class="text-center py-2">
<div class="container">
<h2 class="section-title">About Me</h2>
<div class="bottom-line"></div>
<p class="lead">A little about me and what I do..</p>
<div class="about-info">
<img src="image/about_new.jpg" alt="" class="bio-image">
<div class="bio bg-light">
<h4>All of my projects can be found on github..</h4>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum, aspernatur enter code hereratione quia natus iure maxime corporis nemo exercitationem harum, inventore voluptate quis nisi commodi dolorum velit laudantium eum. Excepturi, autem!</p>
</div>
<div class="award-1">
<i class="fas fa-award fa-3x"></i>
<h3>Award One</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
</div>
<div class="award-2">
<i class="fas fa-award fa-3x"></i>
<h3>Award Two</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
</div>
<div class="award-3">
<i class="fas fa-award fa-3x"></i>
<h3>Award Three</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio, fugit.</p>
</div>
</div>
</div>
</section>
using dev tools the layout is appearing in singe row as shown below rather than as implemented in CSS and the original defined layout is striked through.
grid-template-areas:
"bioimage"
"bio"
"bio"
"aw1"
"aw2"
"aw3";
You're missing the grid-template-colums: element.
Solution:
#about-a .about-info {
display: grid;
grid-template-areas: "bioimage bio bio" "aw1 aw2 aw3";
grid-gap: 1.2rem;
grid-template-columns: 200px 300px //for instance
}
If this doesn't work, feel free to comment down here.
Related
Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.
Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?
HTML:
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
CSS:
.sub-offer {
text-align: center;
display: flex;
position: relative;
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
&:hover {
background: #e5e5e5;
}
}
}
How they look now:
You can add a media query to change the flex-direction when the screen resizes.
Add the following indie .sub-offer class.
#media(max-width: 600px){
flex-direction: column;
}
Add the following inside h2 element.
#media(max-width: 600px){
width: 100%;
}
I solved my issue. To give all three columns the same width I've used what #tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }
To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:
.more-btn {
display: flex;
align-self: center;
margin-top: auto;
}
I'm not really a good dev, but I can give it a try. What I do when I want to make things line up perfectly is use grid, so I tried adding it to .offer-container like this .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;}. A working example is below. Though, since I'm new to helping people on StackOverflow or really StackOverflow in general, I'm sure I didn't do something right. for example, providing a solution to a different problem or fixing issues that you didn't as for. If you need a list of what I changed, you can see that here: added } for sub-offer removed extra closing bracket on a{} separated &:hover to a:hover{} made <p> text white. I hope this is the solution you were looking for if your problem hasn't already been fixed.
.sub-offer {
text-align: center;
display: flex;
position: relative;
width:100px
}
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
}
a:hover {
background: #e5e5e5;
}
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
I am following a series of Traversy Media videos for creating a portfolio website. I have a foundational knowledge of HTML/CSS. We have to create a grid and no matter what I do, I cannot get the grid to show up in my browser (Chrome). The grid will be for the About info on the about page. Also the footer isn't showing up for some reason. Any help would be greatly appreciated.
Here is the about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/31d2c226f4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/main.css">
<title>About Me</title>
</head>
<body>
<div class="overlay"></div>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
<a href="/" class="nav-link">
Home
</a>
</li>
<li class="nav-item current">
<a href="about.html" class="nav-link">
About Moi
</a>
</li>
<li class="nav-item">
<a href="work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="Contact.html" class="nav-link">
How to Reach Me
</a>
</li>
</ul>
</nav>
</header>
<main id="about">
<h1 class="lg-heading">
About
<span class="text-secondary">Me</span>
</h1>
<h2 class="sm-heading">
Let me tell you a few things...
</h2>
<div class="about-info">
<!-- <img src="img/portrait.jpeg" alt="Alex Gool" class="bio-image"> -->
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
</main>
<footer id="main-footer">
Copyright © 2021
</footer>
<script src="js/main.js"></script>
</body>
</html>
And here is the main SCSS file
// Move variable and functions to _config.scss file. This helps tidy up the main.scss file and makes the code more readable. Use #import then the file name (NOT WITH THE .scss EXTENSION).
#import "config";
#import "menu";
// Ensures inside padding will not affect height/width of box, it will just be in the box itself.
* {
box-sizing: border-box;
}
body {
#include background;
background: $primary-color;
color: set-text-color($primary-color);
height: 100%;
margin: 0;
font-family: "Segoe UI", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
}
// Headings
h1,
h2,
h3 {
margin: 0;
font-weight: 400;
&.lg-heading {
font-size: 6rem;
}
&.sm-heading {
margin-bottom: 2rem;
padding: 0.2rem 1rem;
// Background to heading information will be lighter.
// Wrap in RGBA function, 0.5 is the opacity.
background: rgba(lighten($primary-color, 2), 0.5);
}
}
a {
color: #fff;
text-decoration: none;
}
// Header (icon) is fixed so it stays at top right when user scrolls through the webpage.
header {
position: fixed;
z-index: 2;
width: 100%;
}
.text-secondary {
color: $secondary-color;
}
// Nesting the .icons class so that only the icons in the main tag will be affected. This is specific to SASS.
main {
padding: 4rem;
// height: 100%;
min-height: calc(100vh - 60px);
.icons {
margin-top: 1rem;
color: set-text-color($primary-color);
// Inside the div class "icons", each icon is wrapped in a link.
a {
padding: 0.4rem;
// Putting the & in things is specific to SASS, this is not a feature of normal CSS.
&:hover {
color: $secondary-color;
#include easeOut();
}
}
}
&#home {
// This makes it so that there will never be scroll bars.
overflow: hidden;
h1 {
// This brings my name down closer to the middle of the page.
margin-top: 20vh;
}
}
}
.about-info {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-template-rows: auto !important;
grid-template-areas:
"bioimage bio bio"
" job1 job2 job3" !important;
.bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.bio {
grid-area: bio;
font-size: 1.5rem;
}
.job-1 {
grid-area: job1;
}
.job-2 {
grid-area: job2;
}
.job-3 {
grid-area: job3;
}
.job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
}
#main-footer {
text-align: center;
padding: 1rem;
background: darken($primary-color: 10);
color: set-text-color($primary-color);
height: 60px;
}
#import "mobile";
I took this snippet from the code you linked and rewrote it without SCSS so it can compile below. It seems to me like display: grid is working just fine. If you open the chrome dev tools and inspect, you will see a "grid" label on the .about-info element.
.about-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "bioimage bio bio" " job1 job2 job3" !important;
}
.about-info .job-1 {
grid-area: job1;
}
.about-info .job-2 {
grid-area: job2;
}
.about-info .job-3 {
grid-area: job3;
}
.about-info .bio {
grid-area: bio;
font-size: 1.5rem;
}
.about-info .bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.about-info .job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
<div class="about-info">
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
I am trying to get a flex display living in a grid to behave like I want. Upon resizing the browser, the flex area refuses to drop below 2 columns no matter what I tinker with and am at a loss as to what to do. I've just taken up markup/coding and am still in the phase of layouts. I'm trying to leverage the powers of Grid and Flex together but am having minimal luck.
Here is what I have so far....please disregard and styling as this is just me tinkering.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #333;
}
.container {
display: grid;
grid-template-columns: repeat(autofit, minmax(200px, 1fr));
grid-template-rows: autofit 250px 1fr autofit;
grid-template-areas:
"h h h"
"c c c"
"p p p"
"f f f";
}
.flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin: 0, auto;
}
.main-box {
width: 350px;
text-align: center;
justify-content: center;
margin-top: 2rem;
}
.text-wrap {
background-color: #eee;
width: 300px;
margin: auto;
}
.main-box p {
max-width: 200px;
margin: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
}
.green {
grid-area: h;
}
.red {
grid-area: c;
background-image: url("img/bgmain.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
}
.blue {
grid-area: p;
}
.yellow {
grid-area: f;
}
<!DOCTYPE html>
<html>
<head>
<title>Grid/Flex Test</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="container">
<div class="green">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="red">Test</div>
<div class="blue">
<div class="flex-container">
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
</div>
</div>
<div class="yellow">
<span>Copyright © Designed by: Useless Dipshit</span>
</div>
</div>
</body>
</html>
So yeah, I'm a noob.
I forgot:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That solved everything for me.
I know a solution to create equal height columns using display:table like:
.row {
display: table;
width: 100%;
}
.col{
display: table-cell;
}
but my case is a bit different, since I am using flexbox and row class has display:flex:
.row {
display: flex;
display: ms-flex;
flex-wrap: wrap;
}
and all cols have .large-4 class:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
}
I can't use flex:1 for .large-4 as well because it varies in different viewport.
here is a snippet of html:
<div class="row">
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio
optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam
veritatis.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio.
</p>
</div>
</div>
</div>
</div>
code-pen link can be found here! how to I acheive equal height columns using flexbox? or any other better solution. thanks
You need to add display: flex to the .large-4 element:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
display: flex;
}
You'll notice when you inspect your elements using the inspector tool, large-4 elements are actually all the same height. It's the content inside that is not. So by making the parent element flex, it will make the children elements fill the space.
You already have equal-height columns, but inside them is a container that is contracting to its content. Expand that container.
.card {
height: 100%;
}
I'm new to front end design and I would like someone to help me with a grid setup that I can't figure it out. I would like to setup boxes with display: grid function as shown in the example image. Those boxes will later contain content. Can Someone please help me because I can't figure it out.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b1 {
grid-area: 1 / 1 / 2 / 2;
}
.b2 {
grid-area: 1 / 2 / 2 / 5;
}
.b3 {
grid-area: 2 / 1 / 3 / 5;
}
.b4 {
grid-area: 3 / 1 / 2 / 5;
}
.b5 {
grid-area: 3 / 1 / 4/ 5;
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
Povezava nekam
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>
You can simplify your grid like below without the need of grid-areas:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-template-columns:1fr 1fr 1fr;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b2,.b5 {
grid-column:2/span 2;
}
.b3 {
grid-column:1/span 3;
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
Povezava nekam
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>
Relevant code:
.grid {
...
grid-template-columns:1fr 1fr 1fr; /*define 3 columns*/
..
}
.b2,.b5 {
grid-column:2/span 2; /*take 2 colmuns starting from 2*/
}
.b3 {
grid-column:1/span 3; /*take 3 columns starting from 1*/
}
Your grid-areas are a bit messed up - change your grid-area definitions for b4 to grid-area: 3 / 1 / 4 / 2 and b5 to grid-area: 3 / 2 / 4/ 5.
Note the usage of grid-area when using grid lines:
If four values are specified, grid-row-start is set to the
first value, grid-column-start is set to the second value,
grid-row-end is set to the third value, and grid-column-end is set to
the fourth value.
MDN
See corrected demo below:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
.grid {
padding: 50px 0;
display: grid;
grid-gap: 15px;
}
.box_a {
background: gray;
padding: 20px 40px;
}
.box_b {
background: black;
color: white;
padding: 20px 40px;
}
.box_c {
padding: 20px 40px;
background: lightblue;
}
.b1 {
grid-area: 1 / 1 / 2 / 2;
}
.b2 {
grid-area: 1 / 2 / 2 / 5;
}
.b3 {
grid-area: 2 / 1 / 3 / 5;
}
.b4 {
grid-area: 3 / 1 / 4 / 2; /* CHANGED */
}
.b5 {
grid-area: 3 / 2 / 4 / 5; /* CHANGED */
}
<section class="main">
<div class="container grid">
<div class="box_a b1">
<h2>What we do</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, commodi.</p>
Povezava nekam
</div>
<div class="box_b b2">
<h2>How we do it</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In quibusdam iste, earum aut facilis nobis?</p>
Povezava nekam
</div>
<div class="box_c b3">
<div class="post_top">
Povezava prispevka
<h2>Nek zelo dolg naslov prispevka da bo zgledalo lepo</h2>
</div>
<div class="post_bottom">
<h2>Nek podnaslov</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam, placeat. Maiores omnis numquam error adipisci.</p>
</div>
</div>
<div class="box_a b4">
Povezava nekam
<h2>Lorem Ipsum</h2>
Preberi več
</div>
<div class="box_b b5">
Povezava nekam
<h2>Nek srednje dolg naslov</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut, neque.</p>
</div>
</div>
</section>