Question 45966 in CSS Question posted in
Some basic documentation can be found here.

How to align items vertically by columns, BUT not align them horizontally inside columns – CSS

I made a sketch of the layout that I need to make: drawing of the desired layout

My problem is:
how to make articles "4" and "5" position themselves according to the height of the article which is positioned above them, and are not aligned

I tried with these 3 solutions without success:

  1. With CSS Grid: CSS grid allows me to position the 5 elements as desired EXCEPT this height alignment problem!
    With CSS grid, elements "4" and "5" are aligned regardless of the height of element "2" and "3"

  2. With CSS Flex: CSS flex allows me to position the 5 elements as desired EXCEPT this height alignment problem!

I got help from this page but even using "align-items" and "align-self" I can’t get items "4" and "5" to rise proportionally to the height of items "2" and "3"

  1. MASONRY: I also tried with this method:

    Masonry method URL
    DEMO url

    This method uses columns in CSS:

    .masonry { /* Masonry container */
column-count: 4;
column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
background-color: #eee;
 display: inline-block;
margin: 0 0 1em;
width: 100%;
}

My problem with this method is that the items display in order vertically inside the columns

This is a news site and the order in which the elements are displayed is very important: the elements must be displayed in order horizontally

Tags:

3

Answers


  1. 0

    Try this:

    .container {
  display: flex;
  justify-content: center;
  width: 100%;  
}    
.item {
  background-color: green;
  margin: 10px;
}
.col {
  display: flex;
  flex-direction: column;
}
      <div class="container">
    <div class="col col1">
      <div class="item">Item 1</div>
    </div>
    <div class="col col2">
      <div class="item">Item 2</div>
      <div class="item">Item 4</div>
    </div>
    <div class="col col3">
      <div class="item">Item 3</div>
      <div class="item">Item 5</div>
    </div>
  </div>
    Login or Signup to reply.
  2. 0

    Without a working snippet of code its hard to debug, but if I’m understanding correctly I would do as follows.

    Use the flexbox method that got you most of the way there, but place columns 2 + 3 in a seperate <div> this will make columns 4 + 5 align below it starting at the absolute bottom of the largest column of 2 + 3.

    Alternatively, set a min-height to all the columns, making them all align at the same height.

    Login or Signup to reply.
  3. 0

    I recommend Macy.js. To summon up the docs:

    Use the script tag to include:

    <script src="https://cdn.jsdelivr.net/npm/macy@2"></script>

    And add the following code in JavaScript:

    var macy = Macy({
    container: '#macy-container', //Change to the parent element of the articals
    trueOrder: true,
    waitForImages: false, //If there are images set this to true
    margin: 24, //The gap between the columns
    columns: 2, //Total columns
    breakAt: { //Columns for each screen width (optional)
        1200: 5,
        940: 3,
        520: 2,
        400: 1
    }
});

    Check the docs for more info.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search