Responsive πλέγμα με max 4 κουτιά (HTML/CSS)

[philos]

Καλησπέρα
 
Αντιμετωπίζω το εξής πρόβλημα σε "responsive" πλέγμα σε HTML και CSS. Εδώ μπορείτε να δείτε ενεργά τον κώδικα μου.

 

Μιας που ρωτάω πιο ειδικούς θα αναπτύξω ακριβώς τι θέλω να πετύχω:

- όταν υπάρχει ένα κουτί (class="block"), αυτό θα πρέπει να εκτείνεται σε μια γραμμή με 100% πλάτος

- όταν υπάρχουν δύο κουτιά, αυτά θα πρέπει να εκτείνονται και τα δύο σε 100% πλάτος, αλλά το καθένα θα καλύπτει 50% χώρο

--> όταν ο χρήστης μικραίνει το πλάτος του παραθύρου ή έχει μικρή ανάλυση, τα κουτιά θα πρέπει να αλλάζουν ώστε να είναι 1 σε κάθε σειρά, με πλάτος 100% το καθένα

 

- όταν υπάρχουν τρία κουτιά, θα πρέπει τα δύο να είναι στη πρώτη γραμμή (50% πλάτος το καθένα κουτί) και το τρίτο στη 2η γραμμή, με 100% πλάτος

- όταν υπάρχουν τέσσερα κουτιά, θα πρέπει να εκτείνονται σε δύο γραμμές, με 2 κουτιά σε κάθε γραμμή, με 50% πλάτος (ουσιαστικά σαν τη τετράδα που βλέπετε στο παραπάνω dabblet, αλλά όχι κεντραρισμένα - να πιάνου δλδ όλο το χώρο).

--> όταν ο χρήστης μικραίνει το πλάτος του παραθύρου ή έχει μικρή ανάλυση, τα κουτιά θα πρέπει να αλλάζουν ώστε να είναι 1 σε κάθε σειρά, με πλάτος 100% το καθένα.

 

Τέλος να σημειώσω ότι το κάθε κουτί για να φαίνεται καλά με τα περιεχόμενά του θα πρέπει να έχει min-width 698px.

 

ΥΓ: Δεν θέλω να χρησιμοποιήσω bootstrap. Προτιμώ κάποια λύση με CSS ή και JavaScript/jQuery αν χρειαστεί.

 

Κάθε βοήθεια ή ιδέα για εργαλείο, ευπρόσδεκτη!

[paparovic]

Δες αυτό: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ + media queries.

 

Το μόνο πρόβλημα είναι αν σε νοιάζουν οι παλιοί browsers, αλλιώς that's the way to go, μέχρι να βγεί το css grid layout.

[dominotrix]

Τέλος να σημειώσω ότι το κάθε κουτί για να φαίνεται καλά με τα περιεχόμενά του θα πρέπει να έχει min-width 698px.

Αυτο και μονο καταστρεφει το responsiveness. Πως γινεται να δωσεις fixed width και να θελεις responsive? Αν μπει καποιος με οθονη χαμηλοτερη των 698px τοτε πως θα πρεπει να συμπεριφερθει;

 

Αν εξαιρεσεις αυτο τον ορο θα πρεπει εκτος απο @media queries να χρησιμοποιησεις και JS μιας και πρεπει να γινει καπως η καταμετρηση των .blocks

 

Αν ειναι 3 τοτε -> αν ειναι 4 τοτε -> κλπ

 

Λογικα θα κανεις αναζητηση στο parent div να διαβασεις το DOM ποσα .block υπαρχουν και αναλογως να περασεις το καταλληλο CSS που θελεις.

[SlackulatoR]

CSS για μικρές οθόνες

@media only screen and (max-width: 500px) {
    .block {
        min-width:50%;
    }
}

jQuery:

if($("#blocks_container .block").length == 3){
   $(".block").css("min-width","50%");
   $(".block:last-child").css("min-width","100%");
}

[XPHSTOS_]

Δες λίγο μήπως σε βοηθά αυτό.
http://codepen.io/xphstos/pen/VKBXoQ?editors=0100

Η λύση με τα flexbox που προτείνει ο paparovic είναι πολύ καλή, αρκεί να μη σε νοιάζουν κάποιες παλιές εκδόσεις Internet Explorer και mobile browsers.

Στο παράδειγμα μου, γίνονται όλα με floats και με javascript πιάνω το τελευταίο παιδί μέσα στο container.
Στην πρώτη στοιβάδα έχω τον κώδικα που δίνεις, μη την δίνεις σημασία.
Για λόγους ευκολίας, σπάω τις δυάδες κάτω από τα 800px.
Το προσαρμόζεις αναλόγως.

[philos]

Ευχαριστώ πολύ για τις απαντήσεις σας παιδιά!

 

Τελικά χρησιμοποίησα τη λύση του XPHSTOS_ με μερικές προσαρμογές.

 

Να 'στε καλά.

[philos]

Λοιπόν παιδιά έχω άλλο ένα σχετικό πρόβλημα με πλέγμα.
Έχω ανεβάσει εδώ ένα υπόδειγμα (βασίστηκα σε κάποιο βαθμό εκείνο που είχε ποστάρει ο Χρήστος για να το δημιουργήσω).
 
Το ζητούμενο είναι, με οποιονδήποτε αριθμό boxes > 2, όταν η τελευταία σειρά έχει μόνο ένα box, αυτό να μην εμφανίζεται (display: none).
 
Αν κάνετε resize το παράθυρο, θα δείτε ότι τα boxes μαζεύονται ανά σειρά. Απλά στην περίπτωση:
1-2-3
4-5-6
7-8-9
10
 
... το 10 δεν πρέπει να εμφανίζεται (για το παράδειγμα των 10 boxes). Ασφαλώς και θα πρέπει να λειτουργεί για κάθε πιθανό αριθμό boxes  > 2.
 
Καμιά ιδέα;
Σκέφτηκα να χρησιμοποιήσω το javascript event onresize και να παίρνω το width του παραθύρου και έκανα κάτι δοκιμές με @media, αλλά δεν κατάφερα κάτι που να μπορεί να δουλεύει αντικειμενικά - σωστά όπως το θέλω.

[philos]

Μετά από αναζήτηση σε κάμποσες σελίδες, κατάφερα και "έστησα" αυτό με javascript (απόκρυψη τελευταίο box αν είναι μοναδικό στην τελευταία γραμμή).

[philos]

Έχοντας μείνει σε αυτό ως τελικό, θα ήθελα να αποκρύψω όσες γραμμές είναι ανάγκη, ώστε σε κάθε ανάλυση οθόνης, να υπάρχουν πάντα, το μέγιστο 2 γραμμές με κουτιά. Καμιά ιδέα;

 

Δοκίμασα το ακόλουθο, αλλά δεν δουλεύει:

	var box_rows = boxes_limit / lisInRow;
	if (box_rows > 2)
	{
		var i = 0;
		$(parentSelector + " > " + childSelector).each(function() 
		{
				if (i <= lisInRow)
				{
					$(this).hide();
					i++;
				}
		}
	}

(θεωρήστε ότι το box_rows έχει σωστή τιμή)

[WebDevGr]

Γιατί δεν το κάνεις με CSS και breakpoints + nth-child();

 

πχ :last-child:nth-child(odd) {display:none}