How to implement Materialize CSS masonry-like columns, with cards ordered horizontally and not vertically


How to implement Materialize CSS masonry-like columns, with cards ordered horizontally and not vertically



Below is the code sample... the cards are ordered vertically and not sure how to order or display them horizontally...



I am trying to get the data from a database (data will be ordered based on date) and want to display the latest posts on the top row, not the first column



any help would be appreciated


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js
</head>
<style>
.cards-container {
column-break-inside: avoid;
}
.cards-container .card {
display: inline-block;
overflow: visible;
}
@media only screen and (min-width: 993px) {
.cards-container {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}
</style>
<body>







Card Title
add


Test Card 1



Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!



</div>



Card Title
add


Test Card 2



Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!



</div>



Card Title
add


Test Card 3



Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum ea, magni repellat corporis ab voluptates cumque aut quisquam exercitationem obcaecati itaque voluptatem, laborum saepe, eveniet eos doloremque atque! Cum.



</div>



Card Title
add


Test Card 4



Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!



</div>



Card Title
add


Test Card 5



Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi!



</div>



Card Title
add


Test Card 6



Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi, laborum corporis. Atque ducimus qui, suscipit eum impedit dolorum, architecto natus minima sapiente sunt veritatis itaque ad dolore. Et, ipsum sequi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Commodi deleniti sequi placeat ab molestias laborum error provident enim pariatur animi quos harum laudantium rerum veniam quisquam, eius nostrum molestiae facilis!



</div>
</div>
</div>
</body>
</html>





Possible duplicate of stackoverflow.com/questions/44377343/… ?
– Matthew Schlachter
Jun 29 at 19:00









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

Possible Unhandled Promise Rejection (id: 0): ReferenceError: user is not defined ReferenceError: user is not defined

Opening a url is failing in Swift