title: How to arrange divs inside of a CSS Grid?
body: <p>So i have made a div inside of which are divs with h1 and some icons, but i'm not sure how to display them properly. I tried to use Grid, but i don't know if it's the right way.</p>
  <p>The picture of my website:
  <a href="https://i.stack.imgur.com/Yyid4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yyid4.png" alt="enter image description here" /></a></p>
  <p>The picture of a website i reference to:
  <a href="https://i.stack.imgur.com/FJhcZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FJhcZ.png" alt="enter image description here" /></a></p>
  <p>So i want to arrange it like there, but i don't know any other way except of using Grid, with which i'm not very good.</p>
  <p>Styles of grid:</p>
  <pre><code>.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 75px;
    grid-gap: 10px;
      position: absolute;
      left:50%;
      top:40%;
      
    }
    .one {
      grid-column: 1 ;
      grid-row: 1;
    }
    .two {
      grid-column: 2 ;
      grid-row: 2;
    }
    .three {
      grid-column: 3;
      grid-row: 3;
    }
    .four {
      grid-column: 4;
      grid-row: 4;
    }
  </code></pre>
  <p>Html code:</p>
  <pre><code>&lt;div class=&quot;about&quot;&gt;
      &lt;img src=&quot;img/team.jpg&quot;&gt;
      &lt;h1&gt;Voluptatem dignissimos provident quasi&lt;/h1&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt&lt;br&gt; ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit&lt;/p&gt;
      &lt;div class=&quot;wrapper&quot;&gt;
          &lt;div class=&quot;one&quot;&gt;
              &lt;i class=&quot;fas fa-clipboard-list&quot;&gt;&lt;/i&gt;
              &lt;h2&gt;Corporis voluptates sit&lt;/h2&gt;
              &lt;p&gt;Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;two&quot;&gt;
              &lt;i class=&quot;fas fa-cube&quot;&gt;&lt;/i&gt;
              &lt;h2&gt;Ullamco laboris nisi&lt;/h2&gt;
              &lt;p&gt;Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class=&quot;three&quot;&gt;
              &lt;i class=&quot;far fa-images&quot;&gt;&lt;/i&gt;
                  &lt;h2&gt;Labore consequatur&lt;/h2&gt;
                  &lt;p&gt;Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere&lt;/p&gt;
  
          &lt;/div&gt;
          &lt;div class=&quot;four&quot;&gt;
                  
          &lt;/div&gt;
  </code></pre>