Four card feature section using HTML, CSS

Community feedback

• 

  Cynthia Agu•110

  @cynthiachinenyePosted 7 months ago

  nice work @Anniekeme I want to ask if this project can be done using the CSS display grid apart from it. it is great work you did there. then I noticed on the @media screen size even when it is on a laptop size the flex-direction goes to the column and it leaves lots of space on the screen it's there a way to adjust it

  0

  ---

  

  Aniekemé•80

  @AnniekemePosted 7 months ago

  Thank you for your feedback. @cynthiachinenye I believe this project can be done with grid. My first try was with grid, but I could not add padding or margin to make it fit well and look the same as the design. I left grid to flexbox to try and align my div into three columns, and one column will contain two div's so that they can be stacked when we are in desktop mode. while in mobile mode, I just changed the flex direction to column and added some padding. That is all

  MY CODE FOR USING THE GRID LAYOUT (maybe this might help you)

  html
  
  
  
   <main>
  
          <div class="header">
              <h2>Reliable efficient delivery</h2>
              <h2>Powered by Technology</h2>
              <p>Lorem ipsumnissimos aspernatur accusamus sequi eaque odio nemo eos temporibus dolorem esse placeat autem vero accusantium.</p>
          </div>
  
  
          <div class="parent">
              <div class="item1 itm1">
                  <h3>Team Builder</h3>
                  <p>Lorem, ipsum fuga rerum, commodi, odit ex perferendis quas quam inventore.</p>
                  <img src="images/icon-team-builder.svg" alt="Team Builder">
              </div>
  
              <div class="item2">
                  <h3>Calculator</h3>
                  <p>Lorem, ipsum fuga rerum, commodi, odit ex perferendis quas quam inventore.</p>
                  <img src="images/icon-calculator.svg" alt="Calculator">
              </div>
  
              <div class="item3">
                  <h3>Supervisor</h3>
                  <p>Lorem, ipsum fuga rerum, commodi, odit ex perferendis quas quam inventore.</p>
                  <img src="images/icon-supervisor.svg" alt="Supervisor">
              </div>
  
              <div class="item4">
                  <h3>Karma</h3>
                  <p>Lorem, ipsum fuga rerum, commodi, odit ex perferendis quas quam inventore.</p>
                  <img src="images/icon-karma.svg" alt="Karma">
              </div>
  
          </div>
  
  
      </main>
  
  
  
  
  
  body {
      justify-content: center;
      align-items: center;
      font-family: "Montserrat", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      background-color: hsl(30, 38%, 92%);
  }
  
  .header {
      margin: 0 auto;
      text-align: center;
  }
  
  .parent {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-column-gap: 10px;
      grid-row-gap: 0px;
  }
  
  .item1 {
      grid-area: 1 / 3 / 2 / 4;
      background-color: blueviolet;
      padding: 12px;
  }
  
  .itm1 {
      margin-top: 20px;
  }
  
  .item2 {
      grid-area: 2 / 4 / 3 / 5;
      background-color: blueviolet;
      padding: 12px;
  }
  
  .item3 {
      grid-area: 2 / 2 / 3 / 3;
      background-color: blueviolet;
      padding: 12px;
  }
  
  .item4 {
      grid-area: 3 / 3 / 4 / 4;
      background-color: blueviolet;
      padding: 12px;
  }
  
  img {
      margin-left: 150px;
  }
  
  .parent {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(5, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
  }
  
  

  0