Creating a dynamic matrix layout with CSS

Question

Creating a dynamic matrix layout with CSS

On my e-commerce site's product display page, I am facing some alignment issues. There will be around 100 products on this page and I want to display them in a matrix format.

<div  style=" margin: 0 auto; width:640px; text-align: left">
     <div class="leftcol" >left column 1
           <p>my text</p>
           <p>my text</p>
     </div>
     <div class="leftcol" >right column
           <p>my textmy text my text my text</p>
     </div>   
     <div class="leftcol" >left column
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
           <p>my text</p>
     </div>
     <div class="leftcol" >right column
          <p>my textmy text my text my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
     </div>
     <div class="leftcol" >
           left column 2
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
          <p>my text</p>
    </div>

In my CSS:

.leftcol{width: 200px;background:yellow;margin-right:10px;float:left; }

All product divs are the same size of 200px, but the height of the divs will vary. I aim to display the divs similar to what is seen on Pinterest.

The display should look like this:

I would like to eliminate the gaps between the divs by filling them with the next set of divs. Visit this site for an example: [http://pinterest.com/][1] http://pinterest.com/

html css

Answer 1

Answer №1

Similar to the question on how to get a fixed height div to continue on the next line, but not quite.

In order to meet your specific needs, you may find this example helpful: http://jsfiddle.net/bXvaj/

Answer 2

Similar to the question on how to get a fixed height div to continue on the next line, but not quite.

In order to meet your specific needs, you may find this example helpful: http://jsfiddle.net/bXvaj/

Answer 3

Answer №2

Both masonry and pinterest utilize absolute positioning to achieve the desired layout. It seems like a necessary approach for intricate designs that require responsiveness.

However, for a straightforward fixed-width layout, I would opt for the following structure:

<ul id="matte">
   <ul id="first-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>

   <ul id="second-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>


   <ul id="third-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>
</ul>

Therefore, by dividing the layout into columns and populating them based on the shortest one, you can avoid complex javascript calculations. This method could potentially work well with user-generated content, adapting based on the column length dynamically.

Answer 4

Both masonry and pinterest utilize absolute positioning to achieve the desired layout. It seems like a necessary approach for intricate designs that require responsiveness.

However, for a straightforward fixed-width layout, I would opt for the following structure:

<ul id="matte">
   <ul id="first-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>

   <ul id="second-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>


   <ul id="third-col">

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

      <ul class="product-cat">
         <li>...</li>
         <li>...</li>
         ...
      </ul>

   </ul>
</ul>

Therefore, by dividing the layout into columns and populating them based on the shortest one, you can avoid complex javascript calculations. This method could potentially work well with user-generated content, adapting based on the column length dynamically.

Answer 5

Answer №3

After struggling to align a matrix from the database using only CSS, it became clear that jQuery was necessary. Following the advice of "@Gaby aka G. Petrioli" in the comments, I decided to utilize their solution.

Check out masonry.desandro.com or isotope.metafizzy.co for further assistance.

Answer 6

After struggling to align a matrix from the database using only CSS, it became clear that jQuery was necessary. Following the advice of "@Gaby aka G. Petrioli" in the comments, I decided to utilize their solution.

Check out masonry.desandro.com or isotope.metafizzy.co for further assistance.

Creating a dynamic matrix layout with CSS

Answer №1

Answer №2

Answer №3

Similar questions

Could someone offer some assistance in grasping the order of operations in jQuery syntax

Is Jquery not tallying up the numbers accurately?

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

Troubleshooting: Magento checkout page keeps scrolling to the top

What could be causing this JavaScript code to use 50% of the CPU and consume a significant amount of memory in the

Obtain the content from a dynamically generated dropdown menu and incorporate it into a separate file

The leaflet map I created is not showing up on my website for some reason

How to center align a button in the footer of a Bootstrap card

Tips on how to make a <li> element float independently without impacting other elements on the page

What is the best method for adding lengthy text into a mySQL database with PHP?

Strange behavior of dropdown submenu

Retrieving precise passed arguments in the $(document).ready function

The inline-block property can become unstable when dealing with a large number

When clicking, populate the content of another div in a vertical top-to-bottom fashion

When the "x" close icon is clicked, the arrow should toggle back to 0 degrees

Creating an SQL select statement with a three-level expression is a complex task that requires careful planning and

Utilize CSS to position an element absolutely above the scrollbar

Utilizing objects from a JSON file within an HTML document

Display HTML Tables, along with the <tr>, <td>, and <a> tags in a Textview on an Android device

Obtaining select options in jQuery by utilizing the $(this) selector