Use of Grid in section 2 of tribute page

Code Feedback
1

Hi there

I just wanted to know your thoughts on my use of grid in Section 2 of the code in my CSS.

My idea was that if i create a big grid so 12 x 12 for example i can literally position my content anywhere within that. I make the grid layout take the full vh and vw of my page and place the content how I would like, even overlapping if i wanted to.

my question is can I use it like this or is there other best practice? here is the code pen and I will paste the specific code snippet i am reffering to.

The charity container holds my Title, text, video and button,

#charity {

height: 70vh;

padding-top: 10vh;

display: grid;

grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

gap: 0px;

height: 100vh;

}

2

I would suggest you use the repeat function.

It is a perfectly valid use to create a 12-column grid for layout. There are articles/guides you can read as well on how to extend it with col and utility classes to more easily place child content. Naming the grid lines and using grid-template-areas is also an option as a way of organizing the layout.

I might caution over using fixed column grids if you don’t need them. They can help with consistency which can be useful but they might not be needed for smaller sites and have the potential to lock you into a fixed grid when it isn’t needed.

1 Like
3

Thats amazing thank you very much for taking the time to reply and for the link, really appreciate it!