Responsive Grid Layout using CSS Grids

Community feedback

• 

  Cody Lewis Zites•570

  @zitescody

  Posted over 3 years ago

  Hello, @UDsGitHub. Below is my advice on optimizing your project.

  1. It appears your project is not optimized for mobile layouts. Your boxes don't become a single column at smaller breakpoints. CSS Grid is the way to go here, which you have already incorporated. I'd do something like this:

  css:

  main { display: grid; grid-template-columns: [first] 100% [end]; grid-template-rows: repeat(4, 1fr); grid-template-areas: "one" "two" "three" "four" ; }

  .item1 { grid-column-start: first; grid-column-end: end; grid-area: one; }

  .item2 { grid-column-start: first; grid-column-end: end; grid-area: two; }

  .item3 { grid-column-start: first; grid-column-end: end; grid-area: three; }

  .item4 { grid-column-start: first; grid-column-end: end; grid-area: four; }

  @media only screen and (min-width: 768px) { main { display: grid; grid-template-columns: [first] 33% [second] 33% [third] 33% [end]; grid-template-rows: [first] 50% [second] 50% [end]; grid-template-areas: "one" "two " "four" "one" "three " "four" ; } item1 { grid-column-start: first; grid-column-end: second; grid-row-start: first; grid-row-end: end; grid-area: one; }

  item2 { grid-column-start: second; grid-column-end: third; grid-row-start: first; grid-row-end: second; grid-area: two; }

  item3 { grid-column-start: second; grid-column-end: third; grid-row-start: second; grid-row-end: end; grid-area: three;
  }

  item4 { grid-column-start: third; grid-column-end: end; grid-row-start: first; grid-row-end: end; grid-area: four;
  } }

  I will leave the positioning of the boxes up to you, but this should set your grid in the right spot for both a mobile and desktop variant of your content. This is a rather visual way of solving CSS Grid. It is not the most intuitive, but is great for beginners.

  2.) Instead of using h3, switch them to h2. your headings should only increase by 1. This gives your page a hierarchical structure for screen readers to navigate your page easier.

  I hope this helps. I know the code is long. Play around with it, see how it works in your project.

  Please mark this as helpful if you benefitted from my feedback. Happy coding!!

  02