Είχα μια μικρή σχεδιαστική κατάσταση όπου έφτιαχνα ένα ρευστό πλέγμα κουτιών με πλωτήρες. Ήθελα να διευκρινίσω πόσα κουτιά σε μια σειρά ήταν πολύ εύκολα και να τα έκανα στα δύο άκρα του δοχείου. Όχι πολύ δύσκολο, όπως γνωρίζουμε από το να μην υπερβάλλουμε τα πλέγματα και χρησιμοποιώντας το σωστό μέγεθος κουτιού, μπορείτε να πάρετε τέσσερα πλωτά κουτιά σε πλάτος σειράς 25% πλάτος - εύκολο.
Τι γίνεται όμως αν θέλετε να χρησιμοποιήσετε περιθώριο μεταξύ των κουτιών; Εξακολουθεί να είναι απολύτως δυνατό, απλά χρειάζεται κάποια σκέψη. Ας πούμε ότι θέλετε τέσσερα στη σειρά, θα πρέπει να καταλάβετε πόσος χώρος έχει απομείνει αφού χρησιμοποιηθεί όλο το περιθώριο. Επειδή δεν θέλετε περιθώριο στο τελευταίο στη σειρά, αυτό είναι 3 περιθώρια:
100% - (3 * MARGIN)Το 3 είναι πραγματικά «σειρές που θέλετε μείον ένα», οπότε:
100% - ((ROWS - 1) * MARGIN)Στη συνέχεια, διαιρείτε τον χώρο που έχετε αφήσει με πόσα κουτιά θέλετε σε αυτό, έτσι:
(100% - ((ROWS - 1) * MARGIN)) / ROWSΘα μπορούσατε να χρησιμοποιήσετε το Sass για αυτό:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Ακόμα καλύτερα, το κάνουμε σε @mixin, ώστε να μπορούμε να το ονομάζουμε όποτε το χρειαζόμαστε:
@mixin rowMachine($numPerRow, $margin) ( width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) ( margin-bottom: $margin; margin-right: $margin; ) &:nth-child(#($numPerRow)n) ( margin-right: 0; margin-bottom: 0; ) )Παρακολουθήστε το βίντεο για να μάθετε για αυτό το δύσκολο κομμάτι με: nth-child
Στο βίντεο, το κομμάτι στην αρχή με το βρόχο Jade μπορείτε να μάθετε περισσότερα για εδώ.
Και εδώ είναι το στυλό:
Δείτε την Πένα απλή τεχνική για τη χρήση του Sass for Rows του Chris Coyier (@chriscoyier) στο CodePen.