Php – Placing Search Results in Pieces into Separate Divs? Is this Possible?

I’ve looked up your site via Google, so I think I understand what you’re trying to do. Your current layout uses display:grid with grid-template-areas in css so that’s why you’re using all the numbered ids and classes in html. If you want to keep the numbered ids and classes, you can change your code like this:

  <div id="results" class="grid-item1 grid-container">
    <div id="resultsheading" class="grid-item1 heading">Your Results:</div>

    <div id="numheading" class="grid-item2 heading">#:</div>
    <div id="resultlistheading" class="grid-item3 heading">Results:</div>
    <div id="categoryheading" class="grid-item4 heading">Category:</div>
    <div id="subcategoryheading" class="grid-item5 heading">Subcategory</div>

    <?php
    if (!empty($recipes)):
      $itemNumber = 6;
      foreach ($recipes as $key => $recipe):
        $rowNumber = $key + 1;
    ?>
        <div id="num<?= $rowNumber ?>" class="grid-item<?= $itemNumber++ ?>"><?= $rowNumber ?></div>
        <div id="result<?= $rowNumber ?>" class="grid-item<?= $itemNumber++ ?>">
          <a href="/recipe/<?= $recipe->id ?>"><?= $recipe->name ?></a>
        </div>
        <div id="category<?= $rowNumber ?>" class="grid-item<?= $itemNumber++ ?>"><?= $recipe->category ?></div>
        <div id="subcategory<?= $rowNumber ?>" class="grid-item<?= $itemNumber++ ?>"><?= $recipe->subcategory ?></div>
      <?php endforeach; ?>
    <?php else: ?>
      <div style="grid-column: 1 / -1" class="heading">No matching recipes</div>
    <?php endif; ?>

  </div>

I’ve moved the foreach loop so it surrounds the 4 divs that hold the data for one recipe,
and moved the if/else around that.

Then added an $itemNumber variable that starts at 6 (because your first recipe num div has the grid-item6 class), this is then used to print the numbers in all grid-item# classes. (<?= $itemNumber++; ?> prints the $itemNumber and then increases its value by one.)

I’ve also added a $rowNumber variable for the numbering of the ids and the value of the num div,
this is based on the $key in the recipes array (this is numbered starting at 0).

If no recipes are found, a div is displayed that spans the entire width of the grid (style="grid-column: 1 / -1"). I gave it the heading class to give it some styling, but you might want to change that.

You do however have a lot of duplicate code in your css for the numbered ids and classes, so I would suggest changing your html to this instead:

  <div id="results" class="grid-item1 grid-container">
    <div id="resultsheading" class="grid-item1 heading">Your Results:</div>

    <div id="numheading" class="grid-item2 heading">#:</div>
    <div id="resultlistheading" class="grid-item3 heading">Results:</div>
    <div id="categoryheading" class="grid-item4 heading">Category:</div>
    <div id="subcategoryheading" class="grid-item5 heading">Subcategory</div>

    <?php
    if (!empty($recipes)):
      foreach ($recipes as $key => $recipe):
    ?>
        <div class="grid-item num"><?= $key + 1 ?></div>
        <div class="grid-item result">
          <a href="/recipe/<?= $recipe->id ?>"><?= $recipe->name ?></a>
        </div>
        <div class="grid-item category"><?= $recipe->category ?></div>
        <div class="grid-item subcategory"><?= $recipe->subcategory ?></div>
      <?php endforeach; ?>
    <?php else: ?>
      <div class="grid-item no-result">No matching recipes</div>
    <?php endif; ?>

  </div>

This gives each num div a num class, each result div a result class, each category div a category class and each subcategory div a subcategory class. I’ve added a no-result class to the "No matching recipes" div and all divs also get the grid-item class for shared styling.

Then change the css for the grid-container to remove the fixed number of rows for the recipes:

#results.grid-container{
 display:grid;
 grid-template-columns:2% 32.6% 32.6% 31.9%;
 grid-template-rows:repeat(2, 25px);
 grid-auto-rows: 24px; 
 grid-template-areas:
 'resultsheading resultsheading resultsheading resultsheading'
 'numheading resultlistheading categoryheading subcategoryheading';  
 grid-gap:4px;         
 padding:4px;
 margin:0;       
}

The styling for the num, result, category and subcategory classes can then be shortened to this (there’s still duplication here, but I’ve left it like this because it was separate in the original as well):

/* ~~~~~~~~> RESULTS COMMON NUM DIV STYLES <~~~~~~~~ */
#results .num {
 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#91b3e5+0,6890cb+44,91b3e5+100;Blue+3D+%2314 */
 background: #91b3e5; /* Old browsers */
 background: -moz-linear-gradient(top,  #91b3e5 0%, #6890cb 44%, #91b3e5 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(top,  #91b3e5 0%,#6890cb 44%,#91b3e5 100%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(to bottom,  #91b3e5 0%,#6890cb 44%,#91b3e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91b3e5', endColorstr='#91b3e5',GradientType=0 ); /* IE6-9 */
 font-weight:bold; 
 text-align:center;
 color:navy; 
 padding:2px;        
 border:1px solid blue;
 border-radius:4px;        
}
/* ~~~~~~~~> RESULTS COMMON RESULT DIV STYLES <~~~~~~~~ */
#results .result{ 
 background-image:url("/assets/img/backgroundimg/southworth-blue.jpg");        
 text-align:left;
 color:navy;   
 padding:2px;            
 border:1px solid blue; 
 border-radius:4px;        
}

/* ~~~~~~~~> RESULTS COMMON CATEGORY DIV STYLES <~~~~~~~~ */
#results .category{
 background-image:url("/assets/img/backgroundimg/southworth-blue.jpg");        
 text-align:left;
 color:navy;   
 padding:2px;            
 border:1px solid blue; 
 border-radius:4px;        
}

/*~~~~~~~~> RESULTS COMMON SUBCATEGORY DIV STYLES <~~~~~~~~ */
#results .subcategory{
 background-image:url("/assets/img/backgroundimg/southworth-blue.jpg");        
 text-align:left;
 color:navy;   
 padding:2px;            
 border:1px solid blue; 
 border-radius:4px;        
}

To add the alternate row colors back in:

/* background color for "odd" rows */
#results .grid-item:nth-child(8n + 7),
#results .grid-item:nth-child(8n + 8),
#results .grid-item:nth-child(8n + 9){
 background:#91b3e5;       
}
/* background color for "even" rows */
#results .grid-item:nth-child(8n + 11),
#results .grid-item:nth-child(8n + 12),
#results .grid-item:nth-child(8n + 13){
 background:#6890CB;   
}

And styling for the "No matching recipes" div:

#results .no-result{
 grid-column: 1 / -1;
 background:#91b3e5;       
 text-align:center;
 color:navy; 
 padding:2px;        
 border:1px solid blue;
 border-radius:4px;        
}

Made a fiddle here: https://jsfiddle.net/8aLupgjt/

Hope this helps!