div grid inside div grid

July 24, 2022

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 class="grid">
  <div class="column">
    <h2><?php echo $title; ?></h2>
    
    <div class="editgrid">
 <div class="editcolumn">
  <?php echo $row_text['box_1']; ?>
 </div>
</div>

 <br/>

<div class="editgrid_2">
 <div class="editcolumn">
  <?php echo $row_text['box_2']; ?>
 </div>
 <div class="editcolumn">
  <?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

>Solution :

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 class="grid">
        <div class="column">
          <div class="editgrid">
            <div class="editcolumn">
              <h4>'hello'</h4>
            </div>
          </div>

          <br />

          <div class="editgrid_2">
            <div class="editcolumn">
              <h4>'hello'</h4>
            </div>
            <div class="editcolumn">
              <h4>'hello'</h4>
            </div>
          </div>
        </div>

        <div class="column">
          <div class="editgrid">
            <div class="editcolumn">
              <h4>'hello'</h4>
            </div>
          </div>

          <br />

          <div class="editgrid_2">
            <div class="editcolumn">
              <h4>'hello'</h4>
            </div>
            <div class="editcolumn">
              <h4>'hello'</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}