properties
changelog

Place Grid Items

Set grid items alignment along block-axis and inline-axis combined.

Usage:

  • @grid place-*;
  • @grid place-items-*;
  • @grid place-self-*;

Reference

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

	properties: {
		grid: {
			place: {
				DEFAULT: {
					property: "place-content: <v><i>;",
					values: {
						start: "start",
						center: "center",
						end: "end",
						stretch: "stretch",
						between: "space-between",
						around: "space-around",
						evenly: "space-evenly",
					},
				},

				items: {
					property: "place-items: <v><i>;",
					values: {
						start: "start",
						center: "center",
						end: "end",
						stretch: "stretch",
					},
				},

				self: {
					property: "place-self: <v><i>;",
					values: {
						start: "start",
						center: "center",
						end: "end",
						stretch: "stretch",
					},
				},
			},
		},
	},
};

export default shilpConfig;
orderpreset