div grid inside div grid-CodePudding

For hours and hours I've trying to get the style as I wanted. I'm trying to get the grid inside the grid for example like this

 _______________________________________
|  _______________  |  _______________  |
| |               | | |               | |
| |_______________| | |_______________| |
| |       |       | | |       |       | |
| |_______|_______| | |_______|_______| |
|___________________|___________________|

and this is the code I put following

 <div >
  <div >
    <h2><?php echo $title; ?></h2>
    
    <div >
 <div >
  <?php echo $row_text['box_1']; ?>
 </div>
</div>

 <br/>

<div >
 <div >
  <?php echo $row_text['box_2']; ?>
 </div>
 <div >
  <?php echo $row_text['box_3']; ?>
 </div>
</div>

   </div>

and this is the css I am using

    .editcolumn {
      background-color: white;
      padding: 1em 2em;
      border-radius: 25px;
      border: 1px solid black;
    }
    
    .editgrid {
      display: grid;
      grid-column-gap: 20px;
      grid-template-columns: repeat(1, 1fr);
    }
    
    .editgrid_2 {
      display: grid;
      grid-column-gap: 20px;
      grid-template-columns: repeat(2, 1fr);
    }
        
    .column {
      background-color: white;
      padding: 1em 2em;
      text-align: left;
      border-radius: 25px;
      border: 1px solid black;
    }

    .grid {
      display: grid;
      grid-column-gap: 20px;
      grid-template-columns: repeat(2, 1fr);
    }

but unfortunately is look like this which I do not plan it.

 _______________________________
|                               |
|_______________________________|
|              | |              |
|______________| |______________|
 _______________________________
|               |               |
|               |               |
|               |               |
|               |               |
|               |               |
|_______________|_______________|

What am I missing? Any help would be grateful

CodePudding user response：

I'm pretty sure your code works?

I changed the grid css to have a background of red to make things more visible, it seems you only have 1 column? If you add another column, like your first in your desired image, It should work.

I also removed the php references and just hard coded a <h4> tag instead.

Check out https://codesandbox.io/s/billowing-cache-fg4ml9?file=/src/App.js

Full code:

export default function App() {
  return (
    <div className="App">
      <div >
        <div >
          <div >
            <div >
              <h4>'hello'</h4>
            </div>
          </div>

          <br />

          <div >
            <div >
              <h4>'hello'</h4>
            </div>
            <div >
              <h4>'hello'</h4>
            </div>
          </div>
        </div>

        <div >
          <div >
            <div >
              <h4>'hello'</h4>
            </div>
          </div>

          <br />

          <div >
            <div >
              <h4>'hello'</h4>
            </div>
            <div >
              <h4>'hello'</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

CodePudding user response：

Hope this helps. I used flex-box more because it's kinda easier to work with flex if you ask me.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.main-wrapper {
    height: 100vh;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid {
    display: grid;
    grid-template-columns: auto;
    text-align: justify;
    padding: 10px;
    border: 1px solid black;
    margin: 0 10px;
}

.hero {
    text-align: center;
    padding: 10px;
    border: 1px solid black;
}

.grid>section {
    display: flex;
    padding: 10px;
    border: 1px solid black;
}

.grid>section>div {
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

.grid>section>div>p {
    padding: 10px;
}

@media screen and (max-width: 1024px) {
    .main-wrapper {
        flex-direction: column;
    }

    .grid {
        margin: 10px 0;
    }
}

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css" />
    <title>Document</title>
</head>

<body>
    <div >
        <section >
            <div >
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
            <section>
                <div >
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                </div>
                <div >
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                </div>
            </section>
        </section>
        <section >
            <div >
                <p>Lorem ipsum dolor sit amet.</p>
            </div>

            <section>
                <div >
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                </div>
                <div >
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis corporis consectetur inventore,
                        animi
                        cumque iure consequuntur saepe reprehenderit beatae exercitationem.</p>
                </div>
            </section>
        </section>
    </div>
</body>

</html>