Assistance needed for implementing a grid structure

I want to implement a Grid structure [review my attached image for the preview] for a challenge from [Frontendmentor.io] using HTML and CSS only. I have done with HTML and can able to do rest of the styling but I 've been struggling to implement the grid structure format successfully. I tried with the GPT and other AI, but they are complex for me to understand as I am just a novice who is eager to learn.


Here's my main block of HTML:

  <main>
    <section class="features">
      <article class="feature--supervisor">
        <h2 class="feature--supervisor-heading">Supervisor</h2>
        <p class="feature--supervisor-description">Monitors activity to identify project roadblocks</p>
        <div class="feature--supervisor-div__icon">
          <img src="images/icon-supervisor.svg" alt="">
        </div>
      </article>
      <article class="feature--team">
        <h2 class="feature--team-heading">Team Builder</h2>
        <p class="feature--team-description">Scans our talent network to create the optimal team for your project</p>
        <div class="feature--team-div__icon">
          <img src="images/icon-team-builder.svg" alt="">
        </div>
      </article>
      <article class="feature--karma">
        <h2 class="feature--karma-heading">Karma</h2>
        <p class="feature--karma-description">Regularly evaluates our talent to ensure quality</p>
        <div class="feature--karma-div__icon">
          <img src="images/icon-karma.svg" alt="">
        </div>
      </article>
      <article class="feature--calculator">
        <h2 class="feature--calculator-heading">Calculator</h2>
        <p class="feature--calculator-description">Uses data from past projects to provide better delivery estimates
        </p>
        <div class="feature--calculator-div__icon">
          <img src="images/icon-calculator.svg" alt="">
        </div>
      </article>
    </section>
  </main>
desktop-design.jpg
Was this page helpful?