Ensure that a new row is started after every two articles in the HTML code

Looking for a way to make these cards start a new row every two 'article' regions in HTML / 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;
}
<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>

The current setup shows all articles/cards in a single row. Any suggestions on how to create a new row after every two cards? (The number of articles will increase soon)

Appreciate any help!

htmlcss

Answer №1

To ensure that the articles wrap based on screen width, simply include flex-wrap: wrap; within the .tiles_bodyLOB section of your CSS stylesheet. Here is an example:

.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>

To witness the wrapping on large screens, click on full page within the snippet.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Interactive Map Displayed within a Pop-up Window

Recently, I developed a custom Google map where points are plotted and an HTML popup window appears when the image is clicked. Now, my goal is to open a file with JavaScript functions inside a lightbox/fancybox when a user clicks on an image. Below is th ...

javascriptjqueryhtmlgoogle-mapslightbox

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

javascripthtmlcssangularjs

Top strategy for incorporating sprite background images, optimized for search engine optimization

When it comes to using sprite images for icons that are linked without any associated text, the best method in terms of SEO is up for debate. Here are a few different examples of how the markup could be implemented: Option 1: Individual Images <a hre ...

htmlcssseocss-sprites

Ways to make the picker shorter

I've encountered an issue with my Picker element - specifically, I can't seem to reduce its height. Despite trying to adjust the height property in my code snippet below, I haven't had any luck. Here is my code snippet: <View class="pag ...

ioscsstitaniumtitanium-alloypicker

Is it possible to incorporate floating images into CKEditor within Django-CMS?

I have integrated django-cms with djangocms_text_ckeditor and cmsplugin_filer_image. After inserting an image in a text block on a page and selecting "Style > Styled Image (left)", the image displays correctly in the WYSIWYG editor, with it floating to ...

htmldjangockeditordjango-cms

What is the process of generating a popup panel without relying on libraries, using JavaScript and CSS?

I'm currently working on creating a popup panel that is centered on the screen with rounded corners (scrollbars are unnecessary) using jQuery min, similar to this example: https://i.stack.imgur.com/0kYO6.png My progress so far: function (package) ...

javascriptcssdom

Changing Column Heights for Mobile Devices using @media Queries

This specific CSS code is designed for a responsive template, creating three columns on desktops/laptops/iPads and stacking them for phones. However, there is an issue when viewing this layout on mobile devices where the stacked panels are fixed in heigh ...

htmlcssmedia-queries

Having trouble populating form with JSON data. It's not appearing

Currently, I am experimenting with jsfiddle to troubleshoot an issue that is possibly unrelated to React.JS. The problem involves populating form fields with data stored in a JSON file. You can view the fiddle here: https://jsfiddle.net/vp5kLxgs/ I am op ...

javascripthtmljsonreactjsforms

`Arranging miniature images within tabbed sections`

I have been implementing angularjs to render my HTML and utilizing bootstrap 3 for styling. While the tabs are rendering correctly, I am facing an issue where the images within each tab are not displaying in a grid layout; instead, they are being outputt ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

How to Access a PHP Variable within a JavaScript Function Argument

.php <?php $timeArray = [355,400,609,1000]; $differentTimeArray = [1,45,622, 923]; ?> <script type="text/javascript"> var i=0; var eventArray = []; function generateArray(arrayName){ eventVideoArray = <?php echo json_encode(arrayName); ...

javascriptphparrayshtml

Building an HTML5-powered mobile application that runs seamlessly across all platforms

My task is to create a tablet application using HTML5/JS/CSS that is not dependent on any specific platform. Here are the requirements: It should be a cross-platform mobile/tablet application It needs to have offline capability and storage (working witho ...

javascriptcsshtmlcross-platformmosync

Steps to open a webpage with a URL that includes #tags=green, pink, and white at the conclusion

Here's the challenge - Open your page with a URL that includes #tags=green,pink,white at the end Create a JavaScript script that extracts the tags from the URL and displays them in a list, with each tag as a separate list item. For instance, if the ...

javascripthtmlreactjs

Understanding how to activate a React navbar button is essential for creating a seamless user

How can I make my sidebar button change color when I navigate to the page it links to? ...

javascripthtmlsassreact-redux

How can you dynamically duplicate WebControls based on server-side conditions in ASP.NET using C#?

I have the following aspx and cs <%@ Page Language="C#" AutoEventWireup="true" CodeFile="cardPrintingBarcode.aspx.cs" Inherits="Reports_cardPrintingBarcode" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

c#htmlasp.nethtml-tableclone

Enhancing web page interactivity through dynamic element names with Javascript and jQuery

I have an interesting HTML setup that looks like this: <div> <input type="text" name="array[a][b][0][foo]" /> <input type="text" name="array[a][b][0][bar]" /> <select name="array[0][a][b][baz]>...</select> </div> ...

phpjavascripthtmlarrayspost

Guide to quickly redirecting all 404 links to the homepage on a simple HTML website

Is there a way to automatically redirect clients to the homepage if they click on a broken link in a basic HTML website, instead of displaying a custom 404 page? UPDATE: My website consists of only 5 plain HTML pages hosted on GoDaddy. There is no server- ...

javascripthtmlajaxhttpbrowser

My Jquery code seems to break after the second form submission. Could it be related to Django, Ajax, or Jquery?

I have a toggle button that allows users to follow or unfollow. The jQuery is working on the first submit, but when I toggle the button again, the elements don't change. html {% for user in followers %} <div class="flist" id="fl ...

htmljquerydjangoajax

Overlaying diagonal lines/textures on a gradient or image background

Is it possible to achieve a similar texture/fill effect using only CSS? I am looking to overlay diagonal lines on top of various containers with different background fills, and I would prefer to avoid creating patterns as images if possible. Do you have a ...

htmlcsstextures

A dynamic 2-column website design featuring a mobile-friendly layout and an adaptable image

After searching through numerous resources on the topic, I have yet to find a solution to this particular challenge. Is it feasible to create a webpage layout with a text column on the left and an image column on the right that will seamlessly transition i ...

cssresponsive-design

What is the method to activate/deactivate a button depending on a specified input value?

A simple application features an input field for a URL and a button. Upon clicking the button, the JavaScript code within it replaces the domain of the entered URL with a new domain. For instance, if a user enters "www.old.company.com/products," the appl ...

javascripthtmlbuttoninput