1

I want to align items to the top, even above what vertical-align:top gives you. Here's an example

http://jsfiddle.net/fqw1dsj6/

<div class="container">
    <div class="small"></div>
    <div class="big"></div>
    <div class="small"></div>
    <div class="small"></div>
</div>

css

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top;
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige;  
    vertical-align:top;  
}

It ends up looking like

enter image description here

however I am looking for the cleanest technique for pushing blocks up to make it look more like

enter image description here

Is there some new modern technique/api to do this?

Thanks

omega
  • 40,311
  • 81
  • 251
  • 474

1 Answers1

-2

Is there some new modern technique/api to do this?

Yes there is.

You'll need to use CSS Grid.

Then, the property you're looking for is: grid-auto-flow: dense;

More Information:

Added:

I interpreted your example as a 2x5 grid (2 columns, 5 rows) and the approach I have proposed above is based on that.

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 1
    grid-auto-flow:dense cannot achieve such configuration. What he want to achieve isn't *really* a grid – Temani Afif May 12 '20 at 22:20
  • 1
    Depends how strict the dimensions in the images are. – lawrence-witt May 12 '20 at 22:22
  • can you show an example using the dense prop? – omega May 12 '20 at 22:23
  • Yes, there is an example by MDN, here: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow – Rounin May 12 '20 at 22:25
  • It just fills in empty cells in grid, it doesn't change the grid shape to be irregular which is what im asking to do. – omega May 12 '20 at 22:32
  • I'm not sure I'm following what you mean by _irregular_ grid-shape, unless @TemaniAfif has it right and basically what you want to achieve isn't really a grid. I saw it as a 2x5 grid, but maybe I was misreading it. – Rounin May 13 '20 at 11:10