skip to Main Content

Is there a smart and simple way to float elements from bottom left corner to top right corner?

My solution with display:grid is too static and has fix cols and not more than 10 items. I`m searching for a smart solution which works with multiple cols and reams of elements.

.cart {
  border: 5px solid;
  padding: 8px;
  width: 240px;
  height: 200px;
  display: flex;
  align-items: flex-end;
}

.box {
  background-color: lightgray;
  padding: 4px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  grid-template-areas: "box6 box7 box8 box9 box10" "box1 box2 box3 box4 box5";
}

.egg {
  width: 40px;
  aspect-ratio: 3 / 4;
  background-color: sandybrown;
  border-radius: 100% 100% 100% 100% / 120% 120% 80% 80%;
  box-shadow: inset -4px -8px 20px brown;
  font-family: sans-serif;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

.egg:nth-child(1) {
  grid-area: box1;
}

.egg:nth-child(2) {
  grid-area: box2;
}

.egg:nth-child(3) {
  grid-area: box3;
}

.egg:nth-child(4) {
  grid-area: box4;
}

.egg:nth-child(5) {
  grid-area: box5;
}

.egg:nth-child(6) {
  grid-area: box6;
}

.egg:nth-child(7) {
  grid-area: box7;
}

.egg:nth-child(8) {
  grid-area: box8;
}

.egg:nth-child(9) {
  grid-area: box9;
}

.egg:nth-child(10) {
  grid-area: box10;
}
<div class="cart">
  <div class="box">
    <div class="egg">1</div>
    <div class="egg">2</div>
    <div class="egg">3</div>
    <div class="egg">4</div>
    <div class="egg">5</div>
    <div class="egg">6</div>
    <div class="egg">7</div>
    <div class="egg">8</div>
  </div>
</div>

3

Answers


  1. You can rotate the whole around the X axis and then rotate each individual egg around its X axis to get it the right way up.

    <style>
      .cart {
        border: 5px solid;
        padding: 8px;
        width: 240px;
        height: 200px;
        display: flex;
        align-items: flex-end;
      }
      
      .box {
        background-color: lightgray;
        padding: 4px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 8px;
        transform: rotateX(180deg);
        bottom: 0;
        position: relative;
      }
      
      .egg {
        width: 40px;
        aspect-ratio: 3 / 4;
        background-color: sandybrown;
        border-radius: 100% 100% 100% 100% / 120% 120% 80% 80%;
        box-shadow: inset -4px -8px 20px brown;
        font-family: sans-serif;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotateX(180deg);
      }
    </style>
    <div class="cart">
      <div class="box">
        <div class="egg">1</div>
        <div class="egg">2</div>
        <div class="egg">3</div>
        <div class="egg">4</div>
        <div class="egg">5</div>
        <div class="egg">6</div>
        <div class="egg">7</div>
        <div class="egg">8</div>
      </div>
    </div>
    Login or Signup to reply.
  2. A Jquery solution with JQ from this SO answer: Reverse order of a set of HTML elements

    $.fn.reverseChildren = function() {
      return this.each(function() {
        var $this = $(this);
        $this.children().each(function() {
          $this.prepend(this);
        });
      });
    };
    $('.wrap').reverseChildren();
    .wrap {
      outline: 1px solid red;
      padding: .25em;
      width: 150px;
      height: 200px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row-reverse;
      justify-content: space-between;
      align-content: end;
      gap: .25em;
    }
    
    .item {
      outline: 1px solid green;
      width: 2rem;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
    </div>
    Login or Signup to reply.
  3. You may also mirror the grid and cells via scale https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

    The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector [sx, sy], it can resize the horizontal and vertical dimensions at different scales. Its result is a data type.

    1 as positive value does not rescale anything but as a negative value it mirrors the element on its x / y axis .

    .cart {
      border: 5px solid;
      padding: 8px;
      width: 240px;
      height: 200px;
    }
    
    .box {
      background-color: lightgray;
      padding: 4px;
      display: grid;
      grid-template-columns: repeat(auto-fit, 40px);
      gap: 8px;
      height: 100%;
      place-content: start;
      scale: 1 -1;/* mirrors the box on its Y axis */
    }
    
    .egg {
      scale: 1 -1; /* mirrors the cells back */
      width: 40px;
      aspect-ratio: 3 / 4;
      background-color: sandybrown;
      border-radius: 100% 100% 100% 100% / 120% 120% 80% 80%;
      box-shadow: inset -4px -8px 20px brown;
      font-family: sans-serif;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    <div class="cart">
      <div class="box">
        <div class="egg">1</div>
        <div class="egg">2</div>
        <div class="egg">3</div>
        <div class="egg">4</div>
        <div class="egg">5</div>
        <div class="egg">6</div>
        <div class="egg">7</div>
        <div class="egg">8</div>
      </div>
    </div>
    
    <h1>and if too many ? </h1>
    <p>it overflows at top </p>
    <div class="cart">
      <div class="box">
        <div class="egg">1</div>
        <div class="egg">2</div>
        <div class="egg">3</div>
        <div class="egg">4</div>
        <div class="egg">5</div>
        <div class="egg">6</div>
        <div class="egg">7</div>
        <div class="egg">8</div>
        <div class="egg">9</div>
        <div class="egg">10</div>
        <div class="egg">11</div>
        <div class="egg">12</div>
        <div class="egg">13</div>
        <div class="egg">14</div>
        <div class="egg">15</div>
        <div class="egg">16</div>
      </div>
    </div>
    
    
    <p>can be scrolled </p>
    <div class="cart">
      <div class="box" style="overflow:auto;">
        <div class="egg">1</div>
        <div class="egg">2</div>
        <div class="egg">3</div>
        <div class="egg">4</div>
        <div class="egg">5</div>
        <div class="egg">6</div>
        <div class="egg">7</div>
        <div class="egg">8</div>
        <div class="egg">9</div>
        <div class="egg">10</div>
        <div class="egg">11</div>
        <div class="egg">12</div>
        <div class="egg">13</div>
        <div class="egg">14</div>
        <div class="egg">15</div>
        <div class="egg">16</div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search