Understanding the use of CSS Grid in the Build a Magazine Project

1

Hi,

I have just completed the CSS Grid theory, then carried out the whole Build a Magazine project. After that I have done some further background research then came back to the Magazine project to decipher the use of grid within it.

With the basic theory given in the curriculum, the way it has been used here seems almost in indecipherable, and not elucidated at all throughout the workshop.

I will post my many here, any clarifying comments appreciated.

To start with, I can see that main is designated into 3 columns, no problem there.

main {
display: grid;
grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);

----------------

Next, the whole heading section.

.heading {
grid-column: 2 / 3;
display: grid;
grid-template-columns: repeat(2, 1fr);

This is the first major thing I don’t understand. Grid has been declared at the top level with main, yet it’s being designated again in the nested section with .heading. Does this mean that grid-column: 2 / 3; is relating to the columns created by main, but then .heading is then creating a ‘sub grid’ of 2 columns within that grid item?

Next, the next nested item in the with class .hero has this code.

.hero {
grid-column: 1 / -1;
position: relative;

I understand this to mean .hero takes up the full possible width of the grid.

My problem is I don’t understand how the nesting of html elements relates to grid property designations at these different levels. Does it relate to the original .main grid or are we talking about grid inception here?!

I’m not sure if Quincy is showing off with what grid can do for the purpose of educating us, or there is a much simpler way to achieve the layout.

Thanks.

2

that’s correct, it is creating a grid inside an element that is positoned by the other grid

it depends, is this .hero a child of main or a child of .heading? it will take positon inside the grid designed by the parent element

3

This syntax is a shortcut for the grid-column-start and grid-column-end properties. (introduced at level 10 in Grid Garden)

Please take a look at this Grid Garden tutorial. It provides a fun way to visualize how CSS grid works.

Hope that helps.

4

Thanks dhess. I know what the property is, I’m more confused by the grid inception, but ILM has somewhat clarified it.

Thanks for the link, I’ll check it out.