Single price grid component with flexbox

Community feedback

• 

  Matias Ludueña•1,990

  @matiasluduena23Posted about 1 year ago

  Hi Kothe’s! Good work! You can use flex and grid to do that.

  With flex:

  <div class="container">
     <div class="comunity"> </div>
     <wrap-boxes>
          <div class="subscription"></div>
          <div class="why"></div>
     </div>
  </div>
  
  .container {
  display: flex; 
  flex-direccion: column;
  max-width: 700px;
  }
  
  .subscription , .why {
  width: 50%;
  }
  

  With grid:

  <div class="container">
      <div class="comunity"> </div>
      <div class="subscription"></div>
      <div class="why"></div>
  </div>
  
  .container {
  display: grid; 
  grid-template-columns: repeat(2,1fr)
  max-width: 700px
  }
  .community {
  grid-column: 1 / 3;
  }
  

  Check flex grid

  Hope this help you!

  Good code!!!

  Matias

  Marked as helpful

  1
• Account deleted

  Hi, in answer to your question, what do you think this way:

   .container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
    .first-section {
      grid-column: 1/-1;
  }
  

  I hope you find it useful, happy coding! 😉

  1