properties
changelog

Grid Columns

Set grid item's size and location on columns.

Usage:

  • @grid col-start-*;
  • @grid col-end-*;
  • @grid col-size-*;
  • @grid col-span-*;

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		grid: {
			col: {
				start: {
					property: "grid-column-start: <v><i>;",
					themeKey: "range",
					values: {},
				},

				end: {
					property: "grid-column-end: <v><i>;",
					themeKey: "range",
					values: {
						13: 13,
					},
				},

				size: {
					property: "grid-auto-columns: <v><i>;",
					values: {
						auto: "auto",
						min: "min-content",
						max: "max-content",
						fraction: "minmax(0, 1fr)",
					},
				},

				span: {
					property: "grid-column: <v><i>;",
					themeKey: "span",
					values: {},
				},
			},
		},
	},
};

export default shilpConfig;
form intentcols