Grid gutter spacing

Add grid padding and margin utilities matching to grid columns padding.

30px

Element

30px

<!-- Source -->
<div class="m-gutter"></div>
<div class="mx-gutter"></div>
<div class="my-gutter"></div>
<div class="mt-gutter"></div>
<div class="mr-gutter"></div>
<div class="mb-gutter"></div>
<div class="ml-gutter"></div>

<div class="p-gutter"></div>
<div class="px-gutter"></div>
<div class="py-gutter"></div>
<div class="pt-gutter"></div>
<div class="pr-gutter"></div>
<div class="pb-gutter"></div>
<div class="pl-gutter"></div>

<div class="m-gutter-0"></div>
<div class="mx-gutter-0"></div>
<div class="my-gutter-0"></div>
<div class="mt-gutter-0"></div>
<div class="mr-gutter-0"></div>
<div class="mb-gutter-0"></div>
<div class="ml-gutter-0"></div>

<div class="p-gutter-0"></div>
<div class="px-gutter-0"></div>
<div class="py-gutter-0"></div>
<div class="pt-gutter-0"></div>
<div class="pr-gutter-0"></div>
<div class="pb-gutter-0"></div>
<div class="pl-gutter-0"></div>

<div class="m-gutter-1"></div>
<div class="mx-gutter-1"></div>
<div class="my-gutter-1"></div>
<div class="mt-gutter-1"></div>
<div class="mr-gutter-1"></div>
<div class="mb-gutter-1"></div>
<div class="ml-gutter-1"></div>

<div class="p-gutter-1"></div>
<div class="px-gutter-1"></div>
<div class="py-gutter-1"></div>
<div class="pt-gutter-1"></div>
<div class="pr-gutter-1"></div>
<div class="pb-gutter-1"></div>
<div class="pl-gutter-1"></div>

<div class="m-gutter-2"></div>
<div class="mx-gutter-2"></div>
<div class="my-gutter-2"></div>
<div class="mt-gutter-2"></div>
<div class="mr-gutter-2"></div>
<div class="mb-gutter-2"></div>
<div class="ml-gutter-2"></div>

<div class="p-gutter-2"></div>
<div class="px-gutter-2"></div>
<div class="py-gutter-2"></div>
<div class="pt-gutter-2"></div>
<div class="pr-gutter-2"></div>
<div class="pb-gutter-2"></div>
<div class="pl-gutter-2"></div>

<div class="m-gutter-3"></div>
<div class="mx-gutter-3"></div>
<div class="my-gutter-3"></div>
<div class="mt-gutter-3"></div>
<div class="mr-gutter-3"></div>
<div class="mb-gutter-3"></div>
<div class="ml-gutter-3"></div>

<div class="p-gutter-3"></div>
<div class="px-gutter-3"></div>
<div class="py-gutter-3"></div>
<div class="pt-gutter-3"></div>
<div class="pr-gutter-3"></div>
<div class="pb-gutter-3"></div>
<div class="pl-gutter-3"></div>

<div class="m-gutter-4"></div>
<div class="mx-gutter-4"></div>
<div class="my-gutter-4"></div>
<div class="mt-gutter-4"></div>
<div class="mr-gutter-4"></div>
<div class="mb-gutter-4"></div>
<div class="ml-gutter-4"></div>

<div class="p-gutter-4"></div>
<div class="px-gutter-4"></div>
<div class="py-gutter-4"></div>
<div class="pt-gutter-4"></div>
<div class="pr-gutter-4"></div>
<div class="pb-gutter-4"></div>
<div class="pl-gutter-4"></div>

Responsive

<!-- Source -->
<div class="m-gutter-sm"></div>
<div class="mx-gutter-sm"></div>
<div class="my-gutter-sm"></div>
<div class="mt-gutter-sm"></div>
<div class="mr-gutter-sm"></div>
<div class="mb-gutter-sm"></div>
<div class="ml-gutter-sm"></div>

<div class="p-sm-gutter-sm"></div>
<div class="px-sm-gutter-sm"></div>
<div class="py-sm-gutter-sm"></div>
<div class="pt-sm-gutter-sm"></div>
<div class="pr-sm-gutter-sm"></div>
<div class="pb-sm-gutter-sm"></div>
<div class="pl-gutter-sm"></div>

<div class="m-gutter-sm-0"></div>
<div class="mx-gutter-sm-0"></div>
<div class="my-gutter-sm-0"></div>
<div class="mt-gutter-sm-0"></div>
<div class="mr-gutter-sm-0"></div>
<div class="mb-gutter-sm-0"></div>
<div class="ml-gutter-sm-0"></div>

<div class="p-gutter-sm-0"></div>
<div class="px-gutter-sm-0"></div>
<div class="py-gutter-sm-0"></div>
<div class="pt-gutter-sm-0"></div>
<div class="pr-gutter-sm-0"></div>
<div class="pb-gutter-sm-0"></div>
<div class="pl-gutter-sm-0"></div>

<div class="m-gutter-sm-1"></div>
<div class="mx-gutter-sm-1"></div>
<div class="my-gutter-sm-1"></div>
<div class="mt-gutter-sm-1"></div>
<div class="mr-gutter-sm-1"></div>
<div class="mb-gutter-sm-1"></div>
<div class="ml-gutter-sm-1"></div>

<div class="p-gutter-sm-1"></div>
<div class="px-gutter-sm-1"></div>
<div class="py-gutter-sm-1"></div>
<div class="pt-gutter-sm-1"></div>
<div class="pr-gutter-sm-1"></div>
<div class="pb-gutter-sm-1"></div>
<div class="pl-gutter-sm-1"></div>

<div class="m-gutter-sm-2"></div>
<div class="mx-gutter-sm-2"></div>
<div class="my-gutter-sm-2"></div>
<div class="mt-gutter-sm-2"></div>
<div class="mr-gutter-sm-2"></div>
<div class="mb-gutter-sm-2"></div>
<div class="ml-gutter-sm-2"></div>

<div class="p-gutter-sm-2"></div>
<div class="px-gutter-sm-2"></div>
<div class="py-gutter-sm-2"></div>
<div class="pt-gutter-sm-2"></div>
<div class="pr-gutter-sm-2"></div>
<div class="pb-gutter-sm-2"></div>
<div class="pl-gutter-sm-2"></div>

<div class="m-gutter-sm-3"></div>
<div class="mx-gutter-sm-3"></div>
<div class="my-gutter-sm-3"></div>
<div class="mt-gutter-sm-3"></div>
<div class="mr-gutter-sm-3"></div>
<div class="mb-gutter-sm-3"></div>
<div class="ml-gutter-sm-3"></div>

<div class="p-gutter-sm-3"></div>
<div class="px-gutter-sm-3"></div>
<div class="py-gutter-sm-3"></div>
<div class="pt-gutter-sm-3"></div>
<div class="pr-gutter-sm-3"></div>
<div class="pb-gutter-sm-3"></div>
<div class="pl-gutter-sm-3"></div>

<div class="m-gutter-sm-4"></div>
<div class="mx-gutter-sm-4"></div>
<div class="my-gutter-sm-4"></div>
<div class="mt-gutter-sm-4"></div>
<div class="mr-gutter-sm-4"></div>
<div class="mb-gutter-sm-4"></div>
<div class="ml-gutter-sm-4"></div>

<div class="p-gutter-sm-4"></div>
<div class="px-gutter-sm-4"></div>
<div class="py-gutter-sm-4"></div>
<div class="pt-gutter-sm-4"></div>
<div class="pr-gutter-sm-4"></div>
<div class="pb-gutter-sm-4"></div>
<div class="pl-gutter-sm-4"></div>

<div class="m-gutter-md"></div>
<div class="mx-gutter-md"></div>
<div class="my-gutter-md"></div>
<div class="mt-gutter-md"></div>
<div class="mr-gutter-md"></div>
<div class="mb-gutter-md"></div>
<div class="ml-gutter-md"></div>

<div class="p-md-gutter-md"></div>
<div class="px-md-gutter-md"></div>
<div class="py-md-gutter-md"></div>
<div class="pt-md-gutter-md"></div>
<div class="pr-md-gutter-md"></div>
<div class="pb-md-gutter-md"></div>
<div class="pl-gutter-md"></div>

<div class="m-gutter-md-0"></div>
<div class="mx-gutter-md-0"></div>
<div class="my-gutter-md-0"></div>
<div class="mt-gutter-md-0"></div>
<div class="mr-gutter-md-0"></div>
<div class="mb-gutter-md-0"></div>
<div class="ml-gutter-md-0"></div>

<div class="p-gutter-md-0"></div>
<div class="px-gutter-md-0"></div>
<div class="py-gutter-md-0"></div>
<div class="pt-gutter-md-0"></div>
<div class="pr-gutter-md-0"></div>
<div class="pb-gutter-md-0"></div>
<div class="pl-gutter-md-0"></div>

<div class="m-gutter-md-1"></div>
<div class="mx-gutter-md-1"></div>
<div class="my-gutter-md-1"></div>
<div class="mt-gutter-md-1"></div>
<div class="mr-gutter-md-1"></div>
<div class="mb-gutter-md-1"></div>
<div class="ml-gutter-md-1"></div>

<div class="p-gutter-md-1"></div>
<div class="px-gutter-md-1"></div>
<div class="py-gutter-md-1"></div>
<div class="pt-gutter-md-1"></div>
<div class="pr-gutter-md-1"></div>
<div class="pb-gutter-md-1"></div>
<div class="pl-gutter-md-1"></div>

<div class="m-gutter-md-2"></div>
<div class="mx-gutter-md-2"></div>
<div class="my-gutter-md-2"></div>
<div class="mt-gutter-md-2"></div>
<div class="mr-gutter-md-2"></div>
<div class="mb-gutter-md-2"></div>
<div class="ml-gutter-md-2"></div>

<div class="p-gutter-md-2"></div>
<div class="px-gutter-md-2"></div>
<div class="py-gutter-md-2"></div>
<div class="pt-gutter-md-2"></div>
<div class="pr-gutter-md-2"></div>
<div class="pb-gutter-md-2"></div>
<div class="pl-gutter-md-2"></div>

<div class="m-gutter-md-3"></div>
<div class="mx-gutter-md-3"></div>
<div class="my-gutter-md-3"></div>
<div class="mt-gutter-md-3"></div>
<div class="mr-gutter-md-3"></div>
<div class="mb-gutter-md-3"></div>
<div class="ml-gutter-md-3"></div>

<div class="p-gutter-md-3"></div>
<div class="px-gutter-md-3"></div>
<div class="py-gutter-md-3"></div>
<div class="pt-gutter-md-3"></div>
<div class="pr-gutter-md-3"></div>
<div class="pb-gutter-md-3"></div>
<div class="pl-gutter-md-3"></div>

<div class="m-gutter-md-4"></div>
<div class="mx-gutter-md-4"></div>
<div class="my-gutter-md-4"></div>
<div class="mt-gutter-md-4"></div>
<div class="mr-gutter-md-4"></div>
<div class="mb-gutter-md-4"></div>
<div class="ml-gutter-md-4"></div>

<div class="p-gutter-md-4"></div>
<div class="px-gutter-md-4"></div>
<div class="py-gutter-md-4"></div>
<div class="pt-gutter-md-4"></div>
<div class="pr-gutter-md-4"></div>
<div class="pb-gutter-md-4"></div>
<div class="pl-gutter-md-4"></div>

<div class="m-gutter-lg"></div>
<div class="mx-gutter-lg"></div>
<div class="my-gutter-lg"></div>
<div class="mt-gutter-lg"></div>
<div class="mr-gutter-lg"></div>
<div class="mb-gutter-lg"></div>
<div class="ml-gutter-lg"></div>

<div class="p-lg-gutter-lg"></div>
<div class="px-lg-gutter-lg"></div>
<div class="py-lg-gutter-lg"></div>
<div class="pt-lg-gutter-lg"></div>
<div class="pr-lg-gutter-lg"></div>
<div class="pb-lg-gutter-lg"></div>
<div class="pl-gutter-lg"></div>

<div class="m-gutter-lg-0"></div>
<div class="mx-gutter-lg-0"></div>
<div class="my-gutter-lg-0"></div>
<div class="mt-gutter-lg-0"></div>
<div class="mr-gutter-lg-0"></div>
<div class="mb-gutter-lg-0"></div>
<div class="ml-gutter-lg-0"></div>

<div class="p-gutter-lg-0"></div>
<div class="px-gutter-lg-0"></div>
<div class="py-gutter-lg-0"></div>
<div class="pt-gutter-lg-0"></div>
<div class="pr-gutter-lg-0"></div>
<div class="pb-gutter-lg-0"></div>
<div class="pl-gutter-lg-0"></div>

<div class="m-gutter-lg-1"></div>
<div class="mx-gutter-lg-1"></div>
<div class="my-gutter-lg-1"></div>
<div class="mt-gutter-lg-1"></div>
<div class="mr-gutter-lg-1"></div>
<div class="mb-gutter-lg-1"></div>
<div class="ml-gutter-lg-1"></div>

<div class="p-gutter-lg-1"></div>
<div class="px-gutter-lg-1"></div>
<div class="py-gutter-lg-1"></div>
<div class="pt-gutter-lg-1"></div>
<div class="pr-gutter-lg-1"></div>
<div class="pb-gutter-lg-1"></div>
<div class="pl-gutter-lg-1"></div>

<div class="m-gutter-lg-2"></div>
<div class="mx-gutter-lg-2"></div>
<div class="my-gutter-lg-2"></div>
<div class="mt-gutter-lg-2"></div>
<div class="mr-gutter-lg-2"></div>
<div class="mb-gutter-lg-2"></div>
<div class="ml-gutter-lg-2"></div>

<div class="p-gutter-lg-2"></div>
<div class="px-gutter-lg-2"></div>
<div class="py-gutter-lg-2"></div>
<div class="pt-gutter-lg-2"></div>
<div class="pr-gutter-lg-2"></div>
<div class="pb-gutter-lg-2"></div>
<div class="pl-gutter-lg-2"></div>

<div class="m-gutter-lg-3"></div>
<div class="mx-gutter-lg-3"></div>
<div class="my-gutter-lg-3"></div>
<div class="mt-gutter-lg-3"></div>
<div class="mr-gutter-lg-3"></div>
<div class="mb-gutter-lg-3"></div>
<div class="ml-gutter-lg-3"></div>

<div class="p-gutter-lg-3"></div>
<div class="px-gutter-lg-3"></div>
<div class="py-gutter-lg-3"></div>
<div class="pt-gutter-lg-3"></div>
<div class="pr-gutter-lg-3"></div>
<div class="pb-gutter-lg-3"></div>
<div class="pl-gutter-lg-3"></div>

<div class="m-gutter-lg-4"></div>
<div class="mx-gutter-lg-4"></div>
<div class="my-gutter-lg-4"></div>
<div class="mt-gutter-lg-4"></div>
<div class="mr-gutter-lg-4"></div>
<div class="mb-gutter-lg-4"></div>
<div class="ml-gutter-lg-4"></div>

<div class="p-gutter-lg-4"></div>
<div class="px-gutter-lg-4"></div>
<div class="py-gutter-lg-4"></div>
<div class="pt-gutter-lg-4"></div>
<div class="pr-gutter-lg-4"></div>
<div class="pb-gutter-lg-4"></div>
<div class="pl-gutter-lg-4"></div>

<div class="m-gutter-xl"></div>
<div class="mx-gutter-xl"></div>
<div class="my-gutter-xl"></div>
<div class="mt-gutter-xl"></div>
<div class="mr-gutter-xl"></div>
<div class="mb-gutter-xl"></div>
<div class="ml-gutter-xl"></div>

<div class="p-xl-gutter-xl"></div>
<div class="px-xl-gutter-xl"></div>
<div class="py-xl-gutter-xl"></div>
<div class="pt-xl-gutter-xl"></div>
<div class="pr-xl-gutter-xl"></div>
<div class="pb-xl-gutter-xl"></div>
<div class="pl-gutter-xl"></div>

<div class="m-gutter-xl-0"></div>
<div class="mx-gutter-xl-0"></div>
<div class="my-gutter-xl-0"></div>
<div class="mt-gutter-xl-0"></div>
<div class="mr-gutter-xl-0"></div>
<div class="mb-gutter-xl-0"></div>
<div class="ml-gutter-xl-0"></div>

<div class="p-gutter-xl-0"></div>
<div class="px-gutter-xl-0"></div>
<div class="py-gutter-xl-0"></div>
<div class="pt-gutter-xl-0"></div>
<div class="pr-gutter-xl-0"></div>
<div class="pb-gutter-xl-0"></div>
<div class="pl-gutter-xl-0"></div>

<div class="m-gutter-xl-1"></div>
<div class="mx-gutter-xl-1"></div>
<div class="my-gutter-xl-1"></div>
<div class="mt-gutter-xl-1"></div>
<div class="mr-gutter-xl-1"></div>
<div class="mb-gutter-xl-1"></div>
<div class="ml-gutter-xl-1"></div>

<div class="p-gutter-xl-1"></div>
<div class="px-gutter-xl-1"></div>
<div class="py-gutter-xl-1"></div>
<div class="pt-gutter-xl-1"></div>
<div class="pr-gutter-xl-1"></div>
<div class="pb-gutter-xl-1"></div>
<div class="pl-gutter-xl-1"></div>

<div class="m-gutter-xl-2"></div>
<div class="mx-gutter-xl-2"></div>
<div class="my-gutter-xl-2"></div>
<div class="mt-gutter-xl-2"></div>
<div class="mr-gutter-xl-2"></div>
<div class="mb-gutter-xl-2"></div>
<div class="ml-gutter-xl-2"></div>

<div class="p-gutter-xl-2"></div>
<div class="px-gutter-xl-2"></div>
<div class="py-gutter-xl-2"></div>
<div class="pt-gutter-xl-2"></div>
<div class="pr-gutter-xl-2"></div>
<div class="pb-gutter-xl-2"></div>
<div class="pl-gutter-xl-2"></div>

<div class="m-gutter-xl-3"></div>
<div class="mx-gutter-xl-3"></div>
<div class="my-gutter-xl-3"></div>
<div class="mt-gutter-xl-3"></div>
<div class="mr-gutter-xl-3"></div>
<div class="mb-gutter-xl-3"></div>
<div class="ml-gutter-xl-3"></div>

<div class="p-gutter-xl-3"></div>
<div class="px-gutter-xl-3"></div>
<div class="py-gutter-xl-3"></div>
<div class="pt-gutter-xl-3"></div>
<div class="pr-gutter-xl-3"></div>
<div class="pb-gutter-xl-3"></div>
<div class="pl-gutter-xl-3"></div>

<div class="m-gutter-xl-4"></div>
<div class="mx-gutter-xl-4"></div>
<div class="my-gutter-xl-4"></div>
<div class="mt-gutter-xl-4"></div>
<div class="mr-gutter-xl-4"></div>
<div class="mb-gutter-xl-4"></div>
<div class="ml-gutter-xl-4"></div>

<div class="p-gutter-xl-4"></div>
<div class="px-gutter-xl-4"></div>
<div class="py-gutter-xl-4"></div>
<div class="pt-gutter-xl-4"></div>
<div class="pr-gutter-xl-4"></div>
<div class="pb-gutter-xl-4"></div>
<div class="pl-gutter-xl-4"></div>