Question about Grid's column areas

HTML-CSS
#1

How do i make my “showcase” of “Your web presence” go across the web while “main” and “footer” stay like how they are? Im very new to grid layout.

https://codepen.io/bego96/pen/wjYqxg

#2

You have a typo below:

.showcare {
  grid-area: showcase;
}

Once you correct the typo above, if you want showcase area to go across both columns and main and footer to be in separate columns below showcase, then you could use the following:

.container {
  display: grid;
  grid-template-areas:
    "showcase showcase"
    "main footer";
}
1 Like
#3

I edited my Portfolio for a bit and i made my showcase and main to be smaller in width, how do i make it like that without using margin-left and margin-right?

#4