All comments

• 

  Islam abozeed•240

  @islamabozeedSubmitted over 1 year ago

  I didn't add any of main landmarks as the document is kinda a component not a full landing page

  

  summary dashboard using flex

  2

  20
  

  Sean Averill•90

  @seanaverillPosted over 1 year ago

  You could use position: absolute; with top: 50%; left: 50% and transform: translateX(-50%) translateY(-50%); to center the whole main div that contains the element. Also even when creating just a module, it is still best practice to use landmarks if it is being published alone. In this case you could wrap it in a <main> tag and then apply the CSS I mentioned to that tag to get proper positioning.

  1
• 

  Oluwatosin Abigail Daramola•630

  @Heph-zibahSubmitted over 1 year ago

  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?

  

  Responsive News Homepage ReactJs, SASS, and Grid

  1

  20
  

  Sean Averill•90

  @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; and grid-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