Grid Layout Query
Hi guys! I am working on this Frontend Mentor design and decided to make some grid decisions beforehand.
I didn't want to use position absolute so decided to overlaying arrow buttons and navbar using grid. I ended up dividing the layout in 10 columns and 10 rows based on the size of arrow buttons.
Is this approach a good idea?
4 Replies
the number of rows and columns of your grid should be dictated by the groups of content, not the size you want the content to be, so if you're just using grid to have two cells filled and leave 98 cells empty just cause you want the two filled cells to be a certain size, that's not really a good idea
Thank you for feedback! So, what approach will be better in your opinion?
draw boxes around the content you need in different grid cells, and then set sizes on those cells using
grid-template instead of relying on repeat(10, 1fr).
For that top section, I'd say you need 3 columns and 2 rows, with the hero image spanning two rows and one column, the "discover innovative..." text through SHOP NOW spanning two columns and one row, and the arrow buttons one column and one row
actually, 2 and 2 would work, with the text and buttons each getting their own cell in the second column
columns could probably be 60%, 40%, with the rows being 1fr, <however tall your buttons are>Thank you so much for taking the time to answer my question! I will try your approach.