HTML, CSS com Flexbox e Grid

Community feedback

• 

  Asia Ashraf•780

  @asia272Posted 12 days ago

  Hi Vario Eduardo Santos,

  You can use the grid-template-areas property for your layout. This approach will help you structure your design efficiently.

  The grid-template-areas property allows you to define a visual layout of your grid by assigning names to different sections. Instead of manually placing items with grid-column and grid-row, you can use named areas, making your CSS more readable

  main {

  display: grid;

  grid-template-areas:

  'one one one one one two five'
  
  'three four four four four four five';
  

  gap: 1.55rem;

  }

  The grid-area property is then used to assign sections to these named areas inside grid-template-areas:

  .one { grid-area: one; }

  .two { grid-area: two; }

  .three { grid-area: three; }

  .four { grid-area: four; }

  .five { grid-area: five; }

  Additional Notes:

  • You don’t need to specify the width of each section explicitly.

  • Remove any margins from the sections to make the grid layout work properly.

  Marked as helpful

  1

  ---

  

  P

  Carlos Eduardo Santos Oliveira•140

  @Carlos-Eduardo-SPosted 12 days ago

  @asia272 Thank you very much for the tips. I will try to apply them in my next project.

  1