Html - How to float elements from bottom left corner to top right corner

MichaelKoch
July 13, 2024
101 views
3 votes
3 Answers

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>

Answers

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>

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>

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to float elements from bottom left corner to top right corner

Answers