Make row of grids fill whole row 100%

HTML & CSS
1

Hello ,
I want 2x2 grids to fill up 100% of the row, not only 50% .
Spent hours on this yesterday , Can’t seem to find my mistake .
Thanks for your Help…

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <!-- https://www.freeformatter.com/html-validator.html 
           allow No Blank Lines  in <style> below .
	-->
    <style>
      /* comment */
body{font-size: 16px;}/*body-font-size*/
      .grid-container {
      display: grid;
grid-gap: 5px; /*grid-gap*/ 
      grid-template-columns: repeat(
      auto-fill,
 minmax(120px, 100%) minmax(120px, 100%)
      );
background-color: peachpuff; /*grid-background-color*/
      padding: 4px; /*padding*/
      }
      .grid-container > .div_div{
      text-align: left;
      background-color: rgba(255, 255, 255, 0.8);
      padding: 4px;
      }
      .div_div { resize: vertical;
height: 50px; /*textarea-height*/
      width: 100%;
      }
      p { text-align: left;
      width: 100%;
      }
    </style>
  </head>
  <body>
    <h5 contenteditable="true" style="text-align: center;" >Generated By Html-Grid-Maker</h5>
    <!-- comment -->
    <div contenteditable="true" class="grid-container">
<div contenteditable="true" class="grid-container"> <!--contenteditable-->
      <!-- <div contenteditable="true" class="div_div" style="order: 1;">1</div> -->
<div class="div_div"style="order: 1;"><p>Row 1 Col 1</p></div>
<div class="div_div"style="order: 3;"><p>Row 2 Col 1</p></div>
<div class="div_div"style="order: 2;"><p>Row 1 Col 2</p></div>
<div class="div_div"style="order: 4;"><p>Row 2 Col 2</p></div>
	  </div>
	  <br><br>
   </body>
</html>
2

So grid-container is a 2-column layout.

then you open two elements with class grid-container… so the second grid-container is inside the first column of the first one. Which is only 50% of the width of the screen…

2 Likes
3

Thanks for your Help…

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.