Congratulations! 😍 As a blog reader, get a 10% OFF on WP Frontend Delete Account PRO. Use coupon code WPFDA10OFF.

While there are several ways to make “x” items per row using CSS. Modern methods are using CSS Grid and CSS Flexbox. Table Layout is an older method but it has some advantages over modern methods such as wide browser support, automatic sizing, equal column height, etc. Wide browser support means that you can use it in older browsers that may not support Flexbox or Grid. Automatic sizing in the sense that you can set the width of the table, and the browser will automatically adjust the width of each column based on the content. Table Layout can also automatically adjust the height of each row to match the height of the tallest cell in that row.

To use Table Layout, you need to set the display property of the parent element to “table”. This will make the parent element behave like a table, and its child elements will behave like table cells. Here is an example:

<div class="table">
  <div class="table-row">
    <div class="table-cell">Item 1</div>
    <div class="table-cell">Item 2</div>
    <div class="table-cell">Item 3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Item 4</div>
    <div class="table-cell">Item 5</div>
    <div class="table-cell">Item 6</div>
  </div>
</div>

and the CSS:

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid black;
}

In this example, the “.table” element is set to display as a table, and its child elements with class “.table-row” are set to display as table rows. The child elements with class “.table-cell” are set to display as table cells.

You can adjust the styles of the table and its cells to suit your needs, such as changing the width of the table, adding borders to the cells, or setting the height of the cells to ensure they are the same height.

CSS Table Layout: Making “x” items per row
Tagged on:

Sanjeev Aryal

Don't bury your thoughts, put your vision into reality ~ Bob Marley.

Leave a Reply

Your email address will not be published. Required fields are marked *