Fourd card section / Solution

Community feedback

• 

  Laharl•1,000

  @UrbanskiDevPosted about 2 years ago

  Hello Patosinsuerte !

  Congratulation for finishing the challenge

  To answer your question, I think it is possible to position the cards with grid properties only !

  <div class="parent">
       <div class="div1"> </div>
       <div class="div2"> </div>
       <div class="div3"> </div>
       <div class="div4"> </div>
  </div>
  
  .parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  }
  
  .div1 { grid-area: 1 / 2 / 2 / 3; }
  .div2 { grid-area: 2 / 1 / 3 / 2; }
  .div3 { grid-area: 3 / 2 / 4 / 3; }
  .div4 { grid-area: 2 / 3 / 3 / 4; } 
  

  The code above is a basic grid of 3 columns and 3 rows, with the disposition of the four div like it is designed. There's will be a little more work to do, but it is possible to achieve only with grid properties.

  I hope it helps you answer your question, keep learning and happy coding !

  Marked as helpful

  0