Jump to content
luuis

youtube example about Grid

Recommended Posts

I picked the code from this youtube video(https://www.youtube.com/watch?v=v5KzBPUEgGQ), but my page doesnt look as the video shows it(no matter what browser). I added a pdf file, it shows how the page looks like.

I looked over and over to see if I missed anything. My intencion, whenever I go through such videos, is, to get it work and then to analyze the things. So, maybe someone sees whats left or whats wrong.

<!DOCTYPE html>
<html>
    <head>
        <title>supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
<body>        
        
  <header> 
     <h1 class="header-Title"> Header CSS Grid Templat Area </h1> 
  </header>  
        
    <div class="hero">HERO AREA 
        <div class="hero-title">hero-title Grid-Areas</div>
        <p class="hero-subtitle">hero-subtitle making life easier</p>
    </div>
        
    <main>
        <h1>main starts from the blog </h1>   
        <div class="card">
             <img src="GB.jpg" alt="foto" class="card-img">  
             <h2 class="card-title">blog post title</h2> 
               <div class="card-content">                        
                             <p>text ljvslvhöh psoupsdhp bölabvnta</p>     
               </div>
             <a href="">read more</a>
        </div>      
    </main>        
        
        <aside>
            <h1>sidebar stuff</h1> 
             <p>kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf
             kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf
             kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf
             kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf
             kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf
             kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf
             kvdldghldfghf kvdldghldfghfkvdldghldfghfvkvdldghldfghfkvdldghldfghfkvdldghldfghf
             kvdldghldfghfkvdldghldfghfvvkvdldghldfghfkvdldghldfghfkvdldghldfghfkvdldghldfghf</p>
        </aside>
        
         <footer>
           <h1 class="footer-Title"> footer</h1> 
        </footer> 
    </body>
</html>
/*https://www.youtube.com/watch?v=v5KzBPUEgGQ*/

body{ 
    background-color: transparent;    
/* @include font-base; */
   line-height: 1.6;
   display: grid;
/*   grid-template-rows: 10em 50vh auto 10em;
   grid-template-columns: 1fr 5fr 2fr 1fr;*/
   grid-template: "header header header header" 10em
   "hero hero hero hero" 50vh  
   ". main sidebar ." auto
   "footer footer footer footer" 10em / 1fr 5fr 2fr 1fr;
}


header{
   grid-area: header;
}

header,footer{
    display: flex;
    background-color: yellow;   
    justify-content: center;
    align-items: center;
}

.header-Title,
.footer-Title{    
    background-color: red; 
    font-size: 1.0rem;
}

.hero{
    background-color: coral;   
    grid-area: hero;
/*    background-image: url('SCL90R_GraphBig.png');*/
    background-repeat: no-repeat; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

aside{
    grid-area: sidebar;
    background: #fff;
}

footer{
   grid-area: footer;
}


main{
    background-color: red;
    grid-area: main;   
}
.card{
    display: grid;
/*    grid-template-columns: 1fr 3fr;
      grid-template-rows: min-content auto;
      grid-template-areas: "img title"
          "img content";*/
     grid-template: 
         "img title" min-content
          "img content" auto / 1fr 5fr;  
}
.card-img{
    grid-area: img;
    max-width: 100%;
    background-color: pink;
}

.card-title{
    grid-area: title;
    background: lightblue;
}
.card-content{
    grid-area: content;    
    background: lightgreen;
}

 

Share this post


Link to post
Share on other sites

IF! You are talking about column widths of column main and aside, its probably due the excessively long worded text in aside element, so it accommodates to the width of this text and not the column width set by using grid layout.

What pdf?

Some editors have Latin generates built in or you can download or use a online generator.

Share this post


Link to post
Share on other sites

twice times yesterday I added a pdf file. I waited each time till its say's done. Today its not possible cause it says just 163kb allowed.

The text within the aside tag doesnt mean any. In the first place I had just some letters, but did not mean any for the page.

Share this post


Link to post
Share on other sites

Then give us a clue what the specific problem is, were not mind readers. It won't look exactly like youtube because it is working to a narrower viewport width, you are using 1fr 5fr compared to 1fr 3fr, he's using different fonts using css variables.

If you can't add pdf, then try using what everyone else uses and what it mentions using, a IMAGE.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

It doesnt say just pdf files are limited, but any file.So, 160kb available it has worked for this file.

What also doesnt work is managing images. Right now, the union jack I have here, is very small, if I take a larger one it doesnt fit the space as supposed to be, its always originally size.

 

 

KP_Project_GesGif.gif

Share this post


Link to post
Share on other sites

That's the default action on using max-width: with a image, it will expand to its original size and not beyond, you need to use width: 100%; height: auto; to expand proportionately or width: 100%; height: 100%; to fill the area available to it.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Gladly I thank you. Do you have any idea why the areas(header, hero, footer) doesnt fit the space as it is in that video. All this 3 areas have a width as the screen-space has. All this 3 areas are supposed to be managed by and there we have "header header header header" 10em" and for hero-area:
"hero hero hero hero 50vh".

I can change 50vh or 10em, but it works only for height?

Share this post


Link to post
Share on other sites

I don't understand?, the number of references to grid names refers to total number used in '1fr 5fr 2fr 1 fr' of 4, meaning it will occupy the length of those 4 columns whose column widths is proportional to 1, 5, 2, 1 of total parent width, in this case the body element. The '1, 3' used with 2nd column whose proportional length is 5, will fill that column proportionally with 1 (1/4) for image, 3 (3/4) for title and content. Unless your simply possibly referring to default browser body margin? Making not fill total browser width.

Share this post


Link to post
Share on other sites

I don't understand it either, but that's the way it looks like, thats the difference which still remains between my page, based on that code I posted, and the page the video shows up. I have no idea what needs to be changed, especially the code is the code as video has it.
And because of your answer where you corrected this "1fr 5fr compared to 1fr 3fr,", you saw how the page of that video, so you saw the difference.

Share this post


Link to post
Share on other sites

Yes! but as mentioned before, the long worded string of text is breaking the  5fr 2fr proportional condition, its more like '3fr 4fr' because the column is expanding to accommodate the long text. You could use css to break and hyphenate the long worded text which would bring it back to the correct proportional column settings it was supposed to be.

Share this post


Link to post
Share on other sites

Very thank you again, it comes to what its supposed to be. Just header, footer, hero, is left change.
I can force it, jut give the header (so the others) a:
width: XX%;
margin: 0px auto;"

So it looks then this way:
header{
grid-area: header;
width: 50%; /*  maybe better 60 or 70*/
margin: 0px auto;
}

But he, the maker, doesn't have it this way. What is it what I haven't seen?

Have some to add.
I looked again for the p element. Because of a p element within the sidebar, I did not care about the amount of letters. It is described as something what cares about the breaks, so I understand it?

Edited by luuis
forgot one topic

Share this post


Link to post
Share on other sites

Its width is determined by its parent width, which is currently the body element that fills the screen viewport area, it has 4 columns which the header fills using 'header header header header', you can make it half that to make same width as main and sidebar combined by using '. header header .' and the same method for footer and hero OR if you want is exactly a it is now, but! The combined grid width narrower by placing a container wrapping element to the width size you require (50 - 70%) with margin: 0 auto; and apply display: grid; grid-template: css to this element which will become the parent element instead of body element.

Share this post


Link to post
Share on other sites

changing the amount of columns goes into another topic, I have to say. Cause the whole thing collaps.
If it has to be another amount of columsn, where is the point in the video, where he changes it. Or has he not? Is it something what we, the one who watch it, have to guess?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×