0

I have a CSS issue what type of display mode to use for a design I've received from the design team.

The issue concerns a product page for a web shop. On desktop, it's divided into two columns (as shown below), with a couple of different sections. On mobile, the order of these children are completely different.

https://imgur.com/t1B5Sqw.jpg

(On mobile, the order is TITLE, GALLERY, PRICE, DESCRIPTION, CONFIGURATION, DATA, DOWNLOADS, STOCK, ADD TO CART)

My initial thought was to have a wrapper and then put each child in there, where the children are in mobile order, and I change the order on desktop with something like this:

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(8, auto);
  grid-column-gap: 1rem;
}

.product-grid__cell {
  font-family: Arial, Helvetica;
  font-weight: bold;
  color: white;
}

.product-grid__title {
  order: 2;
  background: #4e8d27;
}

.product-grid__price {
  order: 4;
  background: #8d2787;
}

.product-grid__data {
  order: 6;
  background: #c71515;
}

.product-grid__description {
  order: 8;
  background: #15c7c5;
}

.product-grid__configuration {
  order: 10;
  background: #f20775;
}

.product-grid__gallery {
  order: 1;
  grid-row: span 6;
  background: #8a8a8a;
}

.product-grid__compability {
  order: 13;
  background: #33f145;
}

.product-grid__downloads {
  order: 15;
  background: #c409e6;
}

.product-grid__stock {
  order: 12;
  background: #f2b207;
}

.product-grid__buttons {
  order: 14;
  background: #0c07f2;
}
a {
  color: white;
}
<div class="product-grid">
  <!-- Title -->
  <div class="product-grid__cell product-grid__title">
    <h1>Title</h1>
  </div>

  <!-- Price -->
  <div class="product-grid__cell product-grid__price">
    <h2>£ 120.50</h2>
  </div>

  <!-- Data -->
  <div class="product-grid__cell product-grid__data">
    <table>
      <tr>
        <td>Weight</td>
        <td>2 kg</td>
      </tr>
      <tr>
        <td>Height</td>
        <td>1.2 m</td>
      </tr>
    </table>
  </div>

  <!-- Description -->
  <div class="product-grid__cell product-grid__description">
    <p>This is a description of the product</p>
  </div>

  <!-- Configuration -->
  <div class="product-grid__cell product-grid__configuration">
    <input type="radio" id="radio-1"> <label for="radio-1">Option 1</label>
    <input type="radio" id="radio-2"> <label for="radio-1">Option 2</label>
  </div>

  <!-- Gallery -->
  <div class="product-grid__cell product-grid__gallery">
    <img src="https://cdn.bike24.net/i/p/0/0/297800_00_c.jpg?v732128dd8d11dbaab0448ad94b547b2f4b8ed8a6">
  </div>

  <!-- Compability -->
  <div class="product-grid__cell product-grid__compability">
    <p>This product goes well with other bikes.</p>
  </div>

  <!-- Downloads -->
  <div class="product-grid__cell product-grid__downloads">
    <ul>
      <li><a href="#!">Download manual</a></li>
      <li><a href="#!">Download license agreement</a></li>
    </ul>
  </div>

  <!-- Stock -->
  <div class="product-grid__cell product-grid__stock">
    <p>4 items left in stock</p>
  </div>

  <!-- Buttons -->
  <div class="product-grid__cell product-grid__buttons">
    <button type="button">Add to cart</button>
  </div>
</div>

But the issue here is the dynamic heights, where the product-grid__downloads will end up on the same row as product-grid__add-to-cart – ALWAYS, which is not something that I desire.

Using columns didn't turn out right either.

Erik Blomqvist
  • 11
  • 2
  • 1
    Welcome to SO Eric. It would be useful if you could show us all the HTML and CSS as a code snippet. – Mike Poole Aug 16 '19 at 10:34
  • Because technically, **it's not a grid**...it's just two isolated columns with different layouts next to each other. Until `display:contents` is properly supported you may be out of luck. – Paulie_D Aug 16 '19 at 10:39
  • https://stackoverflow.com/questions/45367864/change-the-column-order-in-a-css-grid – AndTheGodsMadeLove Aug 16 '19 at 10:41
  • @MikePoole thanks! I've added a snippet now. – Erik Blomqvist Aug 16 '19 at 11:06
  • @AndTheGodsMadeLove that's not really what I'm after. Look at my updated snippet and also note that the content in the columns should have the heights dynamic (hence, not a grid, as Paulie_D pointed out). – Erik Blomqvist Aug 16 '19 at 11:07

1 Answers1

0

that is exactly what I have tried. CSS Grid or Flexbox isn't a solution because of the dynamic containers height. I solved it by editing the DOM via Javascript listening on a Match Media Query change event. But I didn't really like that solution as it is not a native HTML/CSS solution and also comes with other disadvantages. So I know its a while ago for you, but I am really excited to hear whats your solution here as this is quite actual issue for me

Mr. Anderson
  • 11
  • 3