CSS Grid

Community feedback

• 

  Anton•515

  @antaryaPosted about 2 years ago

  Hi 👋,

  Good work on this challenge 🚀.

  CSS

  [1. Regarding your question. You have width: 50% on body main .elements which sets elements width to 50%. The grid works as expected; it is not an extra column but one with elements width set to 50%. In Chrome, there is a grid badge/toggle under the Elements tab of DevTools for the elements with display: grid; by toggling it, you will see the outline and additional info about the grid.

  • https://developer.chrome.com/docs/devtools/css/grid/#discover

  [2. Use CSS reset to have a good starting point, for example:

  • https://piccalil.li/blog/a-modern-css-reset/.

  [3. You will have issues if you customize styles for specific text lengths. You need to make a layout adaptable to any text length, as the length of the text is unpredictable. Start by removing fixed widths, allow elements to grow and restrict using (max|min)-(width|height) when needed; remove unnecessary margins.

  HTML

  [4. Do not use main tag as a wrapper of your panel, instead add div tag for your panel <main><div class='panel'>...</div></main> as a child of main tag.

  • https://www.w3schools.com/html/html5_semantic_elements.asp

  General

  [5. Take a look at a different approach where you first define default styles for narrow screens and add features for wider screens.

  • https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Responsive/Mobile_first

  [6. To name your classes consistently, check BEM, and to structure it in a reusable way, take a look at CUBE CSS. It will allow to reuse styles or make them easily customizable without deep nesting. Imagine a situation where you need to inject another element before body main .elements:nth-of-type(2) button { this will require changes that are not straightforward, compared to if you had .panel__subscribe button, or even better to style .button so it can be reused. Check these resources for additional information:

  • https://getbem.com/naming/
  • https://cube.fyi/
  • https://www.youtube.com/watch?v=NanhQvnvbR8

  I hope this will be helpful.

  Keep up the good work 🚀. Cheers!

  Marked as helpful

  0

  ---

  

  Nikita Toropov•310

  @tossik8Posted about 2 years ago

  Hello @antarya, Thank you for so many useful resources. However, I still can't get the grid right. It is shown that there is an extra column.

  P.S. I added overflow hidden to the body selector and it put the issue to bed

  0