I have this HTML / CSS code for some cards, thing is, I need them to start a new row every two ‘article’ regions.
How can achieve this?
This is my HTML:

<div id="tile-container">    
   <div class="tiles_bodyLOB">
        <article class="tile-styleLOB">
           <h1 style="color: white; font-size: 38px;">
             <span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
           </h1>
             <span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Sub Text 1
             </span>
           <a href="#">  
               <div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
                   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1 
                   00</span>&nbsp;&nbsp;&nbsp;
               </div>
           </a>
        </article>

        <article class="tile-styleLOB">
           <h1 style="color: white; font-size: 38px;">
             <span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
           </h1>
             <span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Sub Text 1
             </span>
           <a href="#">  
               <div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
                   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1 
                   00</span>&nbsp;&nbsp;&nbsp;
               </div>
           </a>
        </article>


        <article class="tile-styleLOB">
           <h1 style="color: white; font-size: 38px;">
             <span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
           </h1>
             <span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Sub Text 1
             </span>
           <a href="#">  
               <div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
                   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1 
                   00</span>&nbsp;&nbsp;&nbsp;
               </div>
           </a>
        </article>

And my CSS:

.tiles_bodyLOB {
    display: flex;
    grid-template-columns: auto auto;
    column-gap: 1rem;
    row-gap: 1rem;
    margin-top: 0.25rem;
    @media (max-width: 700px) {
        grid-template-columns: repeat(1, 1fr);
    }
    padding: 1rem;
    border-radius: 8px;
    justify-content: space-between;
 }

.tilesLOB {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
    @media (max-width: 700px) {
        grid-template-columns: repeat(1, 1fr);
        }
}

.tile-styleLOB {
 background-color: red;
  min-height: 200px;
  transition: 0.25s ease;
  &:hover {
    transform: translateY(-5px);
    }
  &:focus-within {
    box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
    }
  min-width: 600px;
}

.a-tag:link {color: white;}
.a-tag:hover {color: white;}
.a-tag:visited {color: white;}

This results into a single row of ‘articles’ or cards.
How can I start a new row every two cards? (the number of articles will increase in the short term)

Thanks

>Solution :

If you want to wrap the articles based on screen width then add flex-wrap: wrap; to .tiles_bodyLOB in the CSS, like this

.tiles_bodyLOB {
    display: flex;
    grid-template-columns: auto auto;
    column-gap: 1rem;
    row-gap: 1rem;
    margin-top: 0.25rem;
    @media (max-width: 700px) {
        grid-template-columns: repeat(1, 1fr);
    }
    padding: 1rem;
    border-radius: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
 }

.tilesLOB {
    display: grid;
    grid-template-columns: auto auto;
    gap: 1rem;
    @media (max-width: 700px) {
        grid-template-columns: repeat(1, 1fr);
        }
}

.tile-styleLOB {
 background-color: red;
  min-height: 200px;
  transition: 0.25s ease;
  &:hover {
    transform: translateY(-5px);
    }
  &:focus-within {
    box-shadow: 0 0 0 2px var(--c-gray-800), 0 0 0 4px var(--c-olive-500);
    }
  min-width: 600px;
}

.a-tag:link {color: white;}
.a-tag:hover {color: white;}
.a-tag:visited {color: white;}

<div id="tile-container">    
   <div class="tiles_bodyLOB">
        <article class="tile-styleLOB">
           <h1 style="color: white; font-size: 38px;">
             <span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
           </h1>
             <span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Sub Text 1
             </span>
           <a href="#">  
               <div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
                   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1 
                   00</span>&nbsp;&nbsp;&nbsp;
               </div>
           </a>
        </article>

        <article class="tile-styleLOB">
           <h1 style="color: white; font-size: 38px;">
             <span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
           </h1>
             <span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Sub Text 1
             </span>
           <a href="#">  
               <div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
                   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1 
                   00</span>&nbsp;&nbsp;&nbsp;
               </div>
           </a>
        </article>

        <article class="tile-styleLOB">
           <h1 style="color: white; font-size: 38px;">
             <span>&nbsp;&nbsp;&nbsp;&nbsp;Some Text ABC</span>
           </h1>
             <span style="color: white; font-size: 24px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                Sub Text 1
             </span>
           <a href="#">  
               <div style="color: white; font-size: 18px; grid-template-columns: 1fr 1fr 1fr">
                   <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Case A: 1 
                   00</span>&nbsp;&nbsp;&nbsp;
               </div>
           </a>
        </article>
    </div>
</div>

Click full page in the snippet to see the warping on large screens.