Percentage Boxes
Returns the exact percentage of width and gutter of a given number of boxes in a same row
How to use:
@include percentage-boxes(
// Required value 250,
// Number of columns 4,
// Total Real space 1200
);
Note: You'll need to give the values unitless, to proper convert from pixels to percentage.
Snippet options
Download: Download snippet as percentage-boxes.scss.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!
// M I X I N • P E R C E N T A G E • B O X E S
@mixin percentage-boxes( $box-width, $boxes-number, $total-space: 1200){
$p-width: ($box-width / $total-space) * 100;
$wi-sum: $p-width * $boxes-number;
$wi-gutter: 100 - $wi-sum;
$p-g-width: $wi-gutter / ($boxes-number - 1);
width: $p-width * 1%;
margin-right: $p-g-width * 1%;
}
Create a free my code stock.com account now.
my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!
Find out more and register nowYou can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.