Difficulty understanding CSS Grid whilst attempting to recreate a website design-CodePudding

I'm trying to recreate this design from frontendmentor.com.

My initial thought when I saw the design was to split the card section of the page into a 6x4 grid but so far it hasn't really worked. The grid isn't displaying the columns and rows the way I'd like. I tried building some placeholder rows in the areas where there's no content but that didn't work either.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<title>Four Card Feature Section</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
<main role="landing-page">
    <section >
 <header >
<h1 >Reliable, efficient delivery<br> Powered by technology</h1>
<p >Our Artificial Intelligence powered tools use millions of project data<br> points to ensure that your project is successful</p>
 </header>
    </section>

<div >
        <!--Column 1 -->

    <div >
 <h2 >Supervisor</h2>
 <p >Monitors activity to identify project<br> roadblocks</p>
 <img src = "icon-supervisor.svg" class ="icon" alt="supervisor-icon"/></img>
    </div>


        <!--Column 2 -->

    <div >
 <h2 >Team Builder</h2>
 <p >Scans our talent network to create the<br> optimal team for your project</p>
 <img src = "icon-team-builder.svg" class ="icon" alt="teambuilder-icon"/></img>
    </div>

    <div >    
 <h2 >Karma</h2>
 <p >Regularly evaluates our talent to ensure<br> quality</p>
 <img src = "icon-karma.svg" class ="icon" alt="karma-icon"/></img>
    </div>

        <!--Column 3-->

    <div >   
 <h2 >Calculator</h2>
 <p >Uses data from past projects to provide<br> better delivery estimates</p>
  <img src = "icon-calculator.svg" class ="icon" alt="calculator-icon"/></img>
    </div>



</div>

</main>


</body>

</html>

CSS

* {
    border: 1px solid black;
}

:root {
--gray-text: #696969;
--dark-text: #171717;
}

.column .icon {
    right: -15em;
    position: relative;
}


.heading {
    text-align: center;
    align-content: auto;
    font-family: David;
}

.title-text {
    color: var(--dark-text);
}

.subtitle-text {
    color: var(--gray-text);
}

.column .subtitle-card {
    color: var(--gray-text);
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  padding: 20em;
}


/*
.empty-row-1 {
    grid-column: 1 / 2;
    grid-row: 1;
}

.empty-row-2 {
    grid-column: 1 / 2;
    grid-row: 4;
}

.empty-row-3 {
    grid-column: 5 / 6;
    grid-row: 1;
} 

.empty-row-4 {
    grid-column: 5 / 6;
    grid-row: 4;
}
*/


.column-left {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    text-align: left;
}

.column-middle-a {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    text-align: left;
}

.column-middle-b {
    grid-column: 3 / 4;
    grid-row: 3 / 4;
    text-align: left;
}


.column-right {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
    text-align: left;
}

I commented out the placeholder rows since they didn't work. I removed them from the html file for clutter purposes, but they were just: <div ></div>
I have 1px border on all elements just so I can better see what I'm doing. Of course that isn't meant to stick around forever.

I have a feeling that my "grid approach" is just not the easiest or "correct" way to build this design. Having the "floating" rows in columns 1 and 3 seems awkward and I haven't been able to find any such examples on the usual websites.

Thanks for the help!

CodePudding user response：

Here, you have grid-template-columns: auto auto auto auto auto auto;. You also need grid-template-area property as well where you will describe how you want your grid to look like and then you apply that into elements in which you've applied grid.

For instance if I have three columns and I want it to be like:

Column1 Column2 Column1 Column3

then I have to apply grid-template-area where I will describe it as:

grid-template-areas: "item1 item2,
                     item1 item3"

then,I will put it in columns as well

column1 {
    grid-area: item1;
}

column2 {
    grid-area: item2;
}

column3 {
grid-area:  item3;
}