CODEWITHSUNDEEP
htmlcssflexboxcss-grid
Atul Rajput
Atul Rajput

Reputation: 4178

arrange items in flex column without providing the height to parent

Hi I have this scenreo like this, I have achieved this till upto a certain limit but for that, I need to give the Height to UL,

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 120px;
}

li {
  height: 50px;
  width: 50px;
  background: red;
  margin-bottom: 10px;
  list-style: none;
  text-align: center;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

which I dont want because if my ul will have 13 items and in that Condition, I need them to arrenge like this.

like this

Order of items doesn't matter for me, but the requirement is that a single row will not have more than 5 items,

and if it has 6 items in total then 3 above and 3 beneath needed. So items will be divided equally in rows like this. and this condition has already been achieved.

enter image description here

I am open to using the grid as well.

Upvotes: 0

Views: 82

Answers (2)

user7148391
user7148391

Reputation:

I'm not sure this would serve the purpose but it's all i can come up with.

Requires scaffolding and some funky calculations to care for the margins and keeping all items the same size.

If you want to remove the margins don't forget to adjust the calculation

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


li {
  list-style: none;
}

.parent {
  display: flex;
}

.left {
  flex: 1 0 40%;
}

.right {
  flex: 1 0 60%;
}

.parent>li>ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.parent>li>ul>li {
  height: 50px;
  width: 50px;
  background: red;
  margin: 10px;
}

.left>ul>li {
  flex: 0 0 calc(50% - 20px);
}

.right>ul>li {
  flex: 1 0 calc(33.3% - 20px);
}
<ul class="parent">
  <li class="left">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li class="right">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

Edit Now i don't understand how's the amount of items changes so everything here is just go you and idea of how this might be achieved

This approach uses grid which is not by any means bad, the problem is that the item before last will have to span across the width.

Now this will only serve the purpose when we have 13 items, so you'll have to disable it when there isn't

ul {
  border: 1px solid;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  margin: 30px;
}

li {
  height: 50px;
  width: 50px;
  background: red;
  border: 1px solid;
  list-style: none;
  text-align: center;
}

/* select before last item to push last item down */
ul>li:nth-last-child(2) {
  background: lime;
  grid-column: 2 /6;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Upvotes: 1

Divneet
Divneet

Reputation: 718

in order to remove height from ul element, remove the height and on li the following:

.ul {
height: 100px;
width: 250px;
background: red;
margin-bottom: 10px;
list-style: none;
text-align: center;
}

ideally you should user max-width and min-width on the li element.

By using this you would run into a problem of alignment of the vertical li elements. to resolve that problem, use empty li elements to match the count of the last row to the above rows and set the empty li min-width to 0;

That should be able to solve your issue. Hope that helps!!!!

Upvotes: 0

Related Questions