@gravityforms/components/css/admin/grid.css

UI components for use in Gravity Forms development. Both React and vanilla js flavors.

.gform-admin {

	.gform-grid--container {
		display: flex;
	}

	.gform-grid--wrap {
		flex-wrap: wrap;
	}

	.gform-grid--list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.gform-grid--fixed > .gform-grid--item {
		flex: none;
	}

	.gform-grid--fluid > .gform-grid--item {
		flex: 1;
	}

	.gform-grid--col-spacing-2 {
		margin-inline: calc((var(--gform-admin-spacer-2) / 2) * -1);

		> .gform-grid--item {
			padding-inline: calc(var(--gform-admin-spacer-2) / 2);
		}
	}

	.gform-grid--col-spacing-3 {
		margin-inline: calc((var(--gform-admin-spacer-3) / 2) * -1);

		> .gform-grid--item {
			padding-inline: calc(var(--gform-admin-spacer-3) / 2);
		}
	}

	.gform-grid--col-spacing-4 {
		margin-inline: calc((var(--gform-admin-spacer-4) / 2) * -1);

		> .gform-grid--item {
			padding-inline: calc(var(--gform-admin-spacer-4) / 2);
		}
	}

	.gform-grid--col-spacing-5 {
		margin-inline: calc((var(--gform-admin-spacer-5) / 2) * -1);

		> .gform-grid--item {
			padding-inline: calc(var(--gform-admin-spacer-5) / 2);
		}
	}

	.gform-grid--col-spacing-6 {
		margin-inline: calc((var(--gform-admin-spacer-6) / 2) * -1);

		> .gform-grid--item {
			padding-inline: calc(var(--gform-admin-spacer-6) / 2);
		}
	}

	.gform-grid--col-spacing-8 {
		margin-inline: calc((var(--gform-admin-spacer-8) / 2) * -1);

		> .gform-grid--item {
			padding-inline: calc(var(--gform-admin-spacer-8) / 2);
		}
	}

	.gform-grid--row-spacing-2 {
		margin-block-end: calc(var(--gform-admin-spacer-2) * -1);

		> .gform-grid--item {
			margin-block-end: var(--gform-admin-spacer-2);
		}
	}

	.gform-grid--row-spacing-4 {
		margin-block-end: calc(var(--gform-admin-spacer-4) * -1);

		> .gform-grid--item {
			margin-block-end: var(--gform-admin-spacer-4);
		}
	}

	.gform-grid--row-spacing-6 {
		margin-block-end: calc(var(--gform-admin-spacer-6) * -1);

		> .gform-grid--item {
			margin-block-end: var(--gform-admin-spacer-6);
		}
	}

	.gform-grid--row-spacing-8 {
		margin-block-end: calc(var(--gform-admin-spacer-8) * -1);

		> .gform-grid--item {
			margin-block-end: var(--gform-admin-spacer-8);
		}
	}

	.gform-grid--gap-2 {
		gap: var(--gform-admin-spacer-2);
	}

	.gform-grid--gap-3 {
		gap: var(--gform-admin-spacer-3);
	}

	.gform-grid--gap-4 {
		gap: var(--gform-admin-spacer-4);
	}

	.gform-grid--gap-5 {
		gap: var(--gform-admin-spacer-5);
	}

	.gform-grid--gap-6 {
		gap: var(--gform-admin-spacer-6);
	}

	.gform-grid--gap-8 {
		gap: var(--gform-admin-spacer-8);
	}
}