Maybe my comment would be more helpful on this episode: I got stuck with extra space in a column and couldn’t figure out why. I was creating my elements in relation to their parent , had an img at 50%. Then decided to make the parent a grid with template-columns set to auto and there was all this extra space next to the img. Couldn’t figure out why for ages. Once your item becomes a grid item, giving them a width in percentage then relates it to the size of the CELL its living in! I was telling it to only take half its cell! Instead i needed to size the column to the width I wanted the image to be and removed the width on the image. Then it took up 100% of its cell as is default ❤
CSS grid is like tables in html. Tables has row span and col span, all colums in the vertical line has the same width, ect. ect. there are lots of similarities
Maybe my comment would be more helpful on this episode:
I got stuck with extra space in a column and couldn’t figure out why. I was creating my elements in relation to their parent , had an img at 50%. Then decided to make the parent a grid with template-columns set to auto and there was all this extra space next to the img. Couldn’t figure out why for ages.
Once your item becomes a grid item, giving them a width in percentage then relates it to the size of the CELL its living in! I was telling it to only take half its cell! Instead i needed to size the column to the width I wanted the image to be and removed the width on the image. Then it took up 100% of its cell as is default ❤
the Emmet $ was new for me, thanks. Great teaching and content wes!
wait how did you get that POOP emoji! which extension do you use for emoji! thanks for this amazing course by the way!
So fun and informative
Pure Gold
Please how do you add emojis to your html code
CSS grid is like tables in html. Tables has row span and col span, all colums in the vertical line has the same width, ect. ect. there are lots of similarities
How did you vertically center text inside grid items?
check justify content && align items :)
align-text: center;
For all times
¯\_༼ •́ ͜ʖ •̀ ༽_/¯
grid-column: span 2; //On item that has to take 2 columns.
This is fantastic!
what 's the name of the theme please ?!
Great learning!
Really helped a lot!!!!!
I was just told "1fr" = one fraction?
You mentioned that "fr" stands for "free space", I think you meant to say it stands for "fraction"?
I think that was intentional
Yes, fr is for fraction. developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
In 7 no. video he already mentioned "fr" as fractional unit ("amount of space left after all the elements are laid out.")
He did explicitly say it’s a fractional unit but that he likes to remember it as “free space” ❤