0

I'm looking for some help. We are reworking our software system and with the new design we've got, we actually want to focus it on a column way.

Our clients can manage their CRM and make new fields that they want to use for their relation. We've always been working from left to right, but want to actually start moving from top to bottom.

Like for example:

1 2 3 4
5 6 7 8 
9 10 11 12

This is how it is now. But we wanna start moving to

1 4 7 10 
2 5 8 11
3 6 9 12

We use bootstrap 4, but i have not found a way to do this, pure with HTML and CSS. Been looking a bit at display:grid, but have not found a solution that would work for us. The biggest issues with this is, that it should be flexable. So i don't wanna work with fixed withs and heights.

Can someone push me in the right direction? Is there even a good solution for this? We need to support the most populair browsers and we would love to support IE 11 too at least.

[EDIT]

Some extra info. I've been trying to use display:flex, but i'm getting the next issue.

When an items is larger than others, the item's on the same row get that item his height, but it should just fill the space then with other items. For example:

This is what i get:

1 4 5


2 3 6
3 4 7

This is what i want to do

1 4 10
  5 11
  6
  7 13
2 8 14
3 9
Mike
  • 13
  • 6
  • Are you going to code it from scratch or restructure the current structure? Post the existing code if it is the latter. Either way, this might attract down votes if the post you tried isn't posted. – m4n0 Oct 27 '20 at 15:18

3 Answers3

1

If you already using a CSS-Grid as you tagged, you can also simply use grid-auto-flow: column; and achieve that example as my snippet shows.

.grid {
  display: grid;
  grid-auto-columns: min-content;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
  grid-auto-flow: column;
  text-align: right;
}
  
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • Thanks for you're answer. Have been trying to use this too, but i'm having a issue with this i don't know the solution for it. When item 1 is larger than the others, 4, 7, and 10 get the same height as number 1, but it should take it's own height. Is there anything to do about this? (Check the edited 1st post for more info about this) – Mike Oct 28 '20 at 11:44
0

Try with

display: flex; 
flex-direction: column;

and play around with the width of columns/rows.

anas
  • 41
  • 4
0

You can use flexbox.

section {
height:280px;display:flex;flex-wrap:wrap;
flex-direction:column;width:280px}

div {
background:lightblue;width:50px;height:50px;margin:10px;
display:flex;align-items:center;justify-content:center;}
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</section>
avia
  • 1,527
  • 7
  • 19