It was extremely helpful to start creating content in places where I had ideas of what was to go there. To start, CSS Grid Generator by sarah_edo is so helpful when it comes to paying out all the locations you want to place your data. Simply select the grid marks on the DOM and the grid generator will output code for your CSS so you can assign those div’s a class! Amazing!
If you need a bit more planning or wireframing with your project I also found that figma can be extremely helpful in making your projects come to life and keep your vision in line. Figma is a wireframing app the allows you to, well.. Wirefame--A wireframe is a layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process. ... Wireframes can also be used to create the global and secondary navigation to ensure the terminology and structure used for the site meets user expectations.
Give it a shot! I’m sure you’ll find these just as helpful as I did.