youtube example about Grid

luuis · December 9, 2018

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;
}

dsonesuk · December 9, 2018

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.

luuis · December 10, 2018

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.

dsonesuk · December 10, 2018

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 December 10, 2018 by dsonesuk

luuis · December 10, 2018

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.

dsonesuk · December 10, 2018

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 December 11, 2018 by dsonesuk

luuis · December 12, 2018

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?

dsonesuk · December 12, 2018

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.

luuis · December 12, 2018

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.

dsonesuk · December 12, 2018

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.

luuis · December 14, 2018

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 December 14, 2018 by luuis
forgot one topic

dsonesuk · December 14, 2018

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.

luuis · December 16, 2018

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?

luuis · December 18, 2018

I'm not a professional in this fields, regardless I cant considere this codelines as something huge.
Hard to believe that someone like cant see whats left in comparnes to the video,

dsonesuk · December 18, 2018

I honestly can't make out what you are trying to say and what you really want? Most of the time, and this time it's utter gibberish.

luuis · December 20, 2018

And I cant understand, whats left in all my letters, to see what I want.
And I cant understand why you never said whats so unclear all the time, I mean you answered.

- There is the link to that video,
- there is the code I picked,
- the screenshot which shows the difference of the page look which I have, in comparnes the Kevin Powels look.

And after that, there is my post from Dec 14, saying only with margin and width I can force it, to have it as KP has it, but he did not made it this way.

dsonesuk · December 20, 2018

Look at my answers that start with 'IF', 'I don't understand?', 'Then give us a clue'. I try to cover all specific possible solutions to the vague question you ask.

The video shows that deveopler used mixins, used Photoshop design image, show preview of page within a portrait view that would obviously give a view of page different from shown within video. I told you the extra long string of text was a problem, that would give you a layout from what was shown, but! You dismissed it! Later on IT was a problem. You said you added width and margin? Where? Vague again, and why? For what purpose! Vague again! It's always second guessing with you. And what is "comparnes"? In a word constant gibberish.

luuis · December 22, 2018

I added width and margin here:
header{
grid-area: header;
width: 50%; /* maybe better 60 or 70*/
margin: 0px auto;
}

(Copy from a post above).

I even thanked you for your sentence, about sidebar and the amount of letters within, so?

luuis · January 25, 2019

I told you the extra long string of text was a problem

unforten, it's not, I picked the code again, placed text much more then here, the field grows then, but thats all.

you are using 1fr 5fr compared to 1fr 3fr

Yes, I did, but within a comment, except the card area. But no matter if it has 5fr or 3fr, doesnt concern the structer of the page.

And finally even max-width or width doesnt change anything, the image, even a large image, is placed very well within that card-area.

dsonesuk · January 27, 2019

Its not the quantity of text, it's the length of a single text string that forces the column to that single long text string width that causes it to be proportionally incorrect. If you use different column settings, why complain that it doesn't match the video? If you start using max-pwidth you are defeating the object of using the proportional grid system. The ideal is to use required number of columns to get the layout you require, the more columns the more fine tuning you can achieve. 12 column grid you can easily divide in to quarters, half, thirds, eighths , less so with 10 column grid.

luuis · February 5, 2019

as I said, this: "1fr 3fr" concerns only the card-area. A change from "1fr 3fr" to "1fr 5fr", or even to "1fr 1fr 3fr", doesnt change the card area

Your answers were useless, sorry

dsonesuk · February 7, 2019

And that column size is determined by its parent and parent siblings. If they are incorrect how do you expect they card area to be proportional correct.

youtube example about Grid

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in