Question 44085 in Html Question posted in
Some basic documentation can be found here.

JavaScript Grid Layout – Html

I have created an Array of Objects:

let myArray = [
    {myObject: "This is object number 1"},
    {myObject: "This is object number 2"},
    {myObject: "This is object number 3"},
    {myObject: "This is object number 4"},
    {myObject: "This is object number 5"},
];

I have created a function to paginate this Array:

const paginator = (items, page, per_page) => {
  let offset = (page - 1) * per_page;
  let paginatedItems = items.slice(offset).slice(0, per_page);
  let total_pages = Math.ceil(items.length / per_page);

  return {
    page: page,
    per_page: per_page,
    pre_page: page - 1 ? page - 1 : null,
    next_page: (total_pages > page) ? page + 1 : null,
    total: items.length,
    total_pages: total_pages,
    data: paginatedItems
  };
};

I have then created an Arrow Function containing the HTML code to be displayed.

const formatItem = item => `<div class="card" ${item.category}">
<div class="image-container"><img src="${item.image}" />
//Other div classes and text
</div>`;

I have then run the paginator function using the formatItem function as a parameter:

productContainer.innerHTML = paginator(products, currentPage, perPage)
      .data.map(item => formatItem(item)).join("");

The objects were displayed on the page correctly. I then tried to make the objects display in rows, instead of columns. I tried to do this using the CSS display: grid and display: flex properties. However, neither property displayed the objects in rows, instead of columns.

I have created a grid layout in CSS using the following code:

#products {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    column-gap: 1.5em;
    padding: 2em 50px;
}

How could I cause the objects to show in rows, instead of columns?

The link to more of my code is:
codepen.io/programmer90000/pen/NWLYMax

Tags:

2

Answers


  1. 0

    The following ruleset will put each child of #products on a line (row).

    #products {
    display: flex;
    flex-direction: column;
}

    So ensure that the variable productContainer is actually the element #products in order for the layout to work.

    Login or Signup to reply.
  2. 0

    I figured out finally what’s happening in your code.

    First there’s a bug in your JS. You forgot to close a <div> in the function formatItem. This is the correct one:

    const formatItem = (item) => `
  <div class="card" ${item.category}">
    <div class="image-container">
      <img src="${item.image}" />
      <div class="container">
        <h6 class="brand-name">${item.manufacturer}</h6>
        <h5 class="product-name">${item.brandName.toUpperCase()}</h5>
        <h6 class="price">£${item.price}</h6>
        <button class="add-to-basket">Add To Basket</button>
      </div>
    </div>
  </div>
`;

    This will fix the structure (HTML) of your document. Once the HTML fixed, you still need this style:

    #products {
  display: flex;
}

    and you’ll get your products on a row.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search