Bento Grid using CSS and HTML

Community feedback

• 

  Svitlana Suslenkova•5,360

  @SvitlanaSuslenkovaPosted 2 months ago

  css for container {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr; gap: 1rem; aspect-ratio: 1 / 1; width, max-width...}

  .container6 {grid-row: 1 / span 2;...} ...

  Marked as helpful

  0

  ---

  

  Tohir564•80

  @Tohir564Posted 2 months ago

  Thank you@SvitlanaSuslenkova

  0
• 

  Ilya Andreev•750

  @NeoScripterPosted 2 months ago

  Hey, Tohir! I'm not sure why you couldn't use grid on large screens. The way I would go about it is creating a grid layout and giving each child element grid-area property with a unique name without parethesis. For example, grid-area: emodji-group;. After that, you should give the grid container the grid-template columns and rows and simply distribute the elements inside the property grid-template-areas. You can read Mozilla docs on this topic or simply google how to use this property. Do it in a media query for a large screen. After that, it will work just fine. You can also check out Kewin Powell's Youtube channel and find a video where he explain how to do it in detail. I hope it helps!

  0