Four card feature section attempt with CSS grid

Community feedback

• 

  Alex•1,090

  @AlexBueckigPosted about 5 years ago

  Hi Chloe,

  this project is a perfect exercise for using grid! You can play around with a lot of things like grid template areas (basically named parts of your grid which you can assign to specific parts of your html.)

  If you really want to stick with it, don't switch over to flexbox for this one. Wes Bos has a great free course on Grid, you can find it in the resources section here on the website.

  Now its time for some real feedback! 😅 I saw you wrapping your whole content inside a single grid. I approached this a bit differently. I created two sections, one for the header part and one for the 4 cards. I then used grid to position the cards, while just using block level elements (which is the default display property for all sections, divs, paragraphs, etc.) for the header. Feel free to check out my code, there you can see how I achieved it using grid with grid-template-areas. 😃

  If you have any specific questions using grid, feel free to ask! 😇

  Keep up the great work! 👍

  1

  ---

  

  Alex•1,090

  @AlexBueckigPosted about 5 years ago

  @cguttweb I just had a quick look at your code and I noticed that you specified grid-area aswell as grid-columns and grid-rows. Since you used both methods to position the elements on your grid the one that's occured last in your code will be taken. (grid-column and grid-row in your case)

  It's either grid-area or grid-column/grid-row. grid-area automatically adjusts the columns and row according to your defined template. So you can safely remove your column and row definitions on your grid items.

  Another thing I noticed that you put quotation marks around your grid-areaname. I know, its kinda odd, but if you use quotation marks to specify the name of your areas, it doesn't work... That's why you got the 4 HTML issues uptop in your report. Just go with grid-area: supervisor; etc. and it'll work just fine! 😃👍

  I hope that clears things up a bit. 😃

  1

  

  Chloe•240

  @cguttwebPosted about 5 years ago

  @AlexBueckig grid-template-areas is a good shout I will give that a go thanks.

  Well I've tempted with the template areas and still nothing changes I don't understand that is supposed to position the grid items as they are essentially being placed between rows....

  0

  

  Chloe•240

  @cguttwebPosted about 5 years ago

  @AlexBueckig Ah I see that's done it thanks!

  0