Responsive News Homepage ReactJs, SASS, and Grid
Design comparison
Solution retrospective
What did I find difficult while building the project? I find the grid layout difficult.
Which areas of my code am I unsure of? The grid layout in my app.jsx
Do I have any questions about best practices? In grid layout, what is the best way to use the grid areas? what if my rows are more than tree, how do I go about calling them? what is the best practice to laying sidebar?
Community feedback
- @seanaverillPosted over 1 year ago
Great work! To define grid rows you can use something similar to how you handle columns.
grid-template-rows: repeat(3, 1fr);This will create 3 rows each equal to 1fr in size. To tell your content where to go, on the content you can use
grid-row: 2 / span 1;andgrid-column: 1 / span 3;This will tell your item to go in row 2 and only cover 1 row, and to start in column 1 and cover columns 1, 2, and 3.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord