Διόρθωση responsive grid με κουτιά (CSS)

[philos]

Έχω φτιάξει αυτό το grid με το chatgpt ( 😛 )

Όσο κι αν προσπάθησα να του εξηγήσω, δεν κατάφερα να το κάνω να δουλεύει όπως θέλω και είναι κάπως προχώ css για μένα.

Συγκεκριμένα θέλω τα boxes κάθε γραμμής να είναι πιο "κολλητά" με της αμέσως από-πάνω γραμμής (με ένα μικρό κενό) κι όχι όλη η γραμμή να αφήνει κενό βάσει του box με το μεγαλύτερο content σε ύψος.

Ουσιαστικά ένα πιο "πραγματικό" grid με κουτιά που θα έχουν απλά ένα μικρό margin. Όχι όλη η γραμμή να ακολουθεί το ύψος του μεγαλύτερου σε ύψος box.

Φυσικά αυτό θα έχει ως αποτέλεσμα η τελευταία γραμμή να μην έχει "ευθεία" καθώς τα κουτιά θα διατάσσονται με βάρος προς τα πάνω, αλλά αυτό είναι το ζητούμενο.

Καμιά ιδέα;

[MacTech]

Στείλε κανένα σχέδιο πως το θες δεν έχω καταλάβει τίποτα αχαχα

Δεν εννοείς αυτό, σωστά;

[philos]

Λίγο πρόχειρα στο mspaint, αλλά κάτι τέτοιο! Έχει λογική;

Ουσιαστικά κάθε κουτί πρέπει να είναι κάτω από το αντίστοιχο της άνω σειράς!

 

ΥΓ: Sorry για το "51" στο "5"

Επεξ/σία 1 Μαρτίου 2024 από philos

[MacTech]

Κάτι τέτοιο ;

[philos]

hmm κοντά είναι, αλλά έλεγα για οριζόντια σειρά / κατεύθυνση, όχι κάθετη.

Αν για παράδειγμα έχουμε μόνο 3 ή 4 κουτιά, τότε θα πρέπει να εμφανίζεται 1 σειρά με αυτά (όχι μία στήλη με το ένα κάτω από το άλλο).

[macabre_sunsets]

Αυτό που ψάχνεις νομίζω λέγεται "Masonry grid".

[XPHSTOS_]

Καλημέρα!

Αυτό ΔΕΝ μπορεί να γίνει με grid columns αλλά με απλά columns στην CSS.
Όπως σωστά αναφέρθηκε λέγεται masonry grid.

Δες εδώ ένα demo.
Δεν είναι τόσο καλό όσο το js version του masonry αλλά close enough...
https://codepen.io/xphstos/pen/VwNYxEo