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
/** @type {import('shilpcss/types').ShilpConfig} */
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;

Published at:

Last updated at: